javascript - What is the difference between the different scroll options? - Stack Overflow

admin管理员组

文章数量:1279658

I have tried a few ways of adding scrolling to tables, but just one of them works correctly. What is the difference 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)");

I have tried a few ways of adding scrolling to tables, but just one of them works correctly. What is the difference 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)");

• javascript
• selenium-webdriver
• js-scrollintoview
• js-scrollto
• js-scrollby

Share Improve this question Follow edited Jun 8, 2023 at 11:31 undetected Selenium 193k4444 gold badges303303 silver badges378378 bronze badges asked Feb 13, 2019 at 23:45 shlomishlomi 19111 gold badge11 silver badge77 bronze badges 7

• Have you tried googling for the documentations for each method yet? – Timothy T. Commented Feb 14, 2019 at 2:58
• sure thing, the first and the second are suppose to move to element, - i just don't know the syntacs differents and why in same case (table) only the first one worked. the third is move by pixels as far as i know, the fourth i didnt understand. also there is more of them? – shlomi Commented Feb 14, 2019 at 9:17
• Hmm, how did you get the Element object in the first example? Based on the documentation, the inclusion of true in scrollIntoView(true) shouldn't make a difference because by default true is used for scrollIntoView(). – Timothy T. Commented Feb 14, 2019 at 9:55
• scrollTo(x,y) does what it suggests -- i.e. scrolls to the coordinates you have provided. Meaning .scrollTo(1,1) will cause the pixel position of 1,1 to be top-left of your viewport. – Timothy T. Commented Feb 14, 2019 at 9:58
• about the first example, you run thes before: WebElement Element = driver.findElement(By.linkText("blaBla")); and i dont know why it worked but only the first one worked, strange, but real. scrollTo is not listed, so we have five? or what are the total options? – shlomi Commented Feb 14, 2019 at 10:03

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 22

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 parameter
  • element.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 to scrollIntoViewOptions: {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 to scrollIntoViewOptions: {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 by 0 horizontal pixels and 1000 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 the bottom of the page.

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).

---

.scrollTo()

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?

本文标签： javascriptWhat is the difference between the different scroll optionsStack Overflow