What is the difference between the different scroll options?

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.

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

.scrollToView()

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?