Skip to content
Advertisement

What is the difference between the different scroll options?

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

Advertisement

Answer

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