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

Have you tried googling for the documentations for each method yet? — Timothy T., Feb 14 '19 at 02: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, Feb 14 '19 at 09: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., Feb 14 '19 at 09: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., Feb 14 '19 at 09: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, Feb 14 '19 at 10:03
First example is `By.linkText()`, the second example is by `By.id()`. I won't be able to tell you why it didn't work -- it really depends on the element you're trying to find. By the way to prevent too many comments I have added more thoughts in an answer below. Do look through it and accept it if it helps you! — Timothy T., Feb 14 '19 at 10:11
also i think that the first and the second example are difference in syntacs, so i guess it depends on the locator you send to the scroll syntacs? what about xpath?cssLocator?and all the rest of the locators? — shlomi, Feb 14 '19 at 10:36

undetected Selenium · Accepted Answer · 2019-02-14T12:20:03.110

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.

so we 3 scrolls, and what are the difference at the syntacs between the first and the second one in terms of JS? the second one have the element and the first one declare first of all on the JS — shlomi, Feb 14 '19 at 13:06
`executeScript("arguments[0].scrollIntoView();", Element)` is equivalent to `executeScript("arguments[0].scrollIntoView(true);", element1)` as I mentioned in my answer that the later is the **default value** — undetected Selenium, Feb 14 '19 at 13:09
i mean these three: // Scroll vertical 1000 pixels, horizonal 0 pixels `JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollBy(0,1000)");` // Scroll down to element at the browser `JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("arguments[0].scrollIntoView();", Element);` // Scroll down to the bottom of the page `JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollTo(0, document.body.scrollHeight)")` one question left is why at my second original exm the syntacs is different than the rest? — shlomi, Feb 14 '19 at 13:38
Hmmm, `executeScript()` with `arguments[0]` works for **WebElements** where as `executeScript()` with `document.body` works for the **current browsing context** i.e. the **current window**. Does it answers your question? — undetected Selenium, Feb 14 '19 at 13:42
Hmmm, `((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element1);` will work on WebElement, and `js.executeScript("arguments[0].scrollIntoView();", Element);` will work on window till the gets to the element? i don't see the high difference here, am i wrong? — shlomi, Feb 14 '19 at 14:17
Of-coarse there is a difference between a _WebElement_ and the _window object_ :) but this shouldn't be a part of this question — undetected Selenium, Feb 14 '19 at 14:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188438/discussion-between-shlomi-and-debanjanb). — shlomi, Feb 14 '19 at 18:07

score 1 · Answer 2 · edited Mar 02 '22 at 19:03

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?

and scrollBy? and my fourth example is horizional as far as i understand — shlomi, Feb 14 '19 at 10:35