What is the difference between the different scroll options?

Question

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)");

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

Answer 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?