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

Billiards

Have you tried googling for the documentations for each method yet? – Referent

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? – Billiards

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(). – Referent

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. – Referent

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? – Billiards

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! – Referent

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? – Billiards

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.

Linnea

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 – Billiards

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 – Linnea

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? – Billiards

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? – Linnea

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? – Billiards

Of-coarse there is a difference between a WebElement and the window object :) but this shouldn't be a part of this question – Linnea

Let us continue this discussion in chat. – Billiards

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

---

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

Referent

and scrollBy? and my fourth example is horizional as far as i understand – Billiards