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