CODEWITHSUNDEEP
javascriptselenium-webdriverjs-scrollintoviewjs-scrolltojs-scrollby
shlomi
shlomi

Reputation: 191

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

Upvotes: 15

Views: 22669

Answers (2)

Timothy T.
Timothy T.

Reputation: 1091

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?

Upvotes: 1

undetected Selenium
undetected Selenium

Reputation: 193308

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.

Upvotes: 22

Related Questions