问题
I have tried a few ways of adding scrolling to tables, but just one of them works correctly. What is the different between them?
First:
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(\"arguments[0].scrollIntoView();\", Element);
Second:
WebElement element1 = driver.findElement(By.id(\"scrolled_element\"));
((JavascriptExecutor) driver).executeScript(\"arguments[0].scrollIntoView(true);\", element1);
Third:
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(\"window.scrollBy(0,1000)\");
Fourth:
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(\"window.scrollTo(0, document.body.scrollHeight)\");
回答1:
Element.scrollIntoView()
Element.scrollIntoView() method scrolls the element on which it's called into the Viewport of the browser window.
Syntax:
element.scrollIntoView()
element.scrollIntoView(alignToTop)
// Boolean parameterelement.scrollIntoView(scrollIntoViewOptions)
// Object parameter
Your usecases:
executeScript("arguments[0].scrollIntoView();", Element)
: This line of code will scroll the element into the visible area of the browser window.executeScript("arguments[0].scrollIntoView(true);", element1)
: This line of code will scroll the element to be aligned to the top of the Viewport of the scrollable ancestor. This option corresponds toscrollIntoViewOptions: {block: "start", inline: "nearest"}
. Basically, this is the default value.executeScript("arguments[0].scrollIntoView(false)", element1);
: This line of code will scroll the element to be aligned to the bottom of the Viewport of the scrollable ancestor. This option corresponds toscrollIntoViewOptions: {block: "end", inline: "nearest"}
.
Window.scrollBy()
window.scrollBy() method scrolls the document in the current window by the given amount.
Syntax:
window.scrollBy(x-coord, y-coord)
window.scrollBy(options)
Parameters:
x-coord
is the horizontal pixel value that you want to scroll by.y-coord
is the vertical pixel value that you want to scroll by.options
is a ScrollToOptions dictionary.
Your usecase:
executeScript("window.scrollBy(0,1000)")
: This line of code will scroll the document in the window down by0
horizontal pixels and1000
vertical pixels that you want to scroll by.
Window.scrollTo()
Window.scrollTo() method scrolls to a particular set of coordinates in the document.
Syntax:
window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
Parameters:
x-coord
is the pixel along the horizontal axis of the document that you want displayed in the upper left.y-coord
is the pixel along the vertical axis of the document that you want displayed in the upper left.options
is a ScrollToOptions dictionary.
Your usecase:
executeScript("window.scrollTo(0, document.body.scrollHeight)")
: This line of code will scroll the document in the window down to thebottom
of the page.
回答2:
I'll put the relevant documentation below each example so that you can refer to it yourself, and give some of my very humble opinions:
.scrollIntoView() vs .scrollIntoView(true)
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
There shouldn't be a difference since the documentation states that by default, .scrollIntoView()
actually has a default value of true
.
.scrollBy()
https://www.w3schools.com/jsref/met_win_scrollby.asp
Scrolls the document by the indicated pixels. Meaning if your top left viewport is at (10,10)
, doing a .scrollby(5,6)
means the viewport will, after shifting, be at a pixel coordinate of (15,16)
.
.scrollToView()
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Does what it suggests -- i.e. scrolls to the coordinates you have provided. This is different to scroll by (i.e. above example). This means that .scrollTo(1,1)
will scroll the document so that your top-left viewport is now at a pixel coordinate of (1,1)
, regardless of what it was before.
To your separate question of what are the total scroll options -- well, there's also window.scroll()
, but based on the below SO article there shouldn't be any difference to scrollTo()
:
JavaScript window.scroll vs. window.scrollTo?
来源:https://stackoverflow.com/questions/54681172/what-is-the-difference-between-the-different-scroll-options