Differencebetween the Different Scroll Options

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.

Difference between HTML overflow : auto and overflow : scroll

Auto will only show a scrollbar when any content is clipped.

Scroll will however always show the scrollbar even if all content fits and you cant scroll it.

JavaScript window.scroll vs. window.scrollTo?

There are no differences: https://developer.mozilla.org/en/DOM/window.scroll

As far as I know, all major browsers support both.

scrollIntoView block vs inline

The block option decides where the element will be vertically aligned inside the visible area of its scrollable ancestor:

Using {block: "start"}, the element is aligned at the top of its ancestor.
Using {block: "center"}, the element is aligned at the middle of its ancestor.
Using {block: "end"}, the element is aligned at the bottom of its ancestor.
Using {block: "nearest"}, the element:
- is aligned at the top of its ancestor if you're currently below it.
- is aligned at the bottom of its ancestor if you're currently above it.
- stays put, if it's already in view.

The inline option decides where the element will be horizontally aligned inside the visible area of its scrollable ancestor:

Using {inline: "start"}, the element is aligned at the left of its ancestor.
Using {inline: "center"}, the element is aligned at the centre of its ancestor.
Using {inline: "end"}, the element is aligned at the right of its ancestor.
Using {inline: "nearest"}, the element:
- is aligned at the left of its ancestor if you're currently on its right.
- is aligned at the right of its ancestor if you're currently on its left.
- stays put, if it's already in view.

Both block and inline can be used at the same time to scroll to a specified point in one motion.

Check out the following snippet to see how each works in action.

Snippet:

/* ----- JavaScript ----- */var buttons = document.querySelectorAll(".btn");
[].forEach.call(buttons, function (button) {  button.onclick = function () {    var where = this.dataset.where.split("-");    document.querySelector("div#a1").scrollIntoView({      behavior: "smooth",      block: where[0],      inline: where[1]    });  };});

/* ----- CSS ----- */body {  padding: 500px;  width: 2000px;}
header {  position: fixed;  top: 0;  left: 0;  width: 100;}
div#a1 {  width: 1000px;  height: 300px;  background: url(//www.w3schools.com/css/trolltunga.jpg);  background-repeat: no-repeat;}

<!----- HTML -----><header>  <button class="btn" data-where="start-start">T-L</button>  <button class="btn" data-where="start-center">T-C</button>  <button class="btn" data-where="start-end">T-R</button>  <button class="btn" data-where="center-start">C-L</button>  <button class="btn" data-where="center-center">C-C</button>  <button class="btn" data-where="center-end">C-R</button>  <button class="btn" data-where="end-start">B-L</button>  <button class="btn" data-where="end-center">B-C</button>  <button class="btn" data-where="end-end">B-R</button></header>
<div id = "a1"></div>

FlatList Vs ScrollView

There's a big difference between FlatList and ScrollView

ScrollView will load the items (data for scrolling) immediately after the component has been loaded. As a result, all data will be stored in RAM, and you will be unable to use hundreds or thousands of items in it (due to low performance).

FlatList, on the other hand, has a better solution for this problem; it will mount 10 items (by default) to the screen, and as the user scrolls the view, other items will mount.
It's a significant advantage to use FlatList instead of ScrollView.

You can use ScrollView for a small number of items and FlatList for even 10000 items.

Specifying scroll options in DT::datatable affects reactivity of inputs in the table header if using renderUI

In the UI you have to remove the JavaScript; it is useless and it throws an error.

In the server you have to bind/unbind table().header():

options = list(
  ordering = FALSE, 
  scrollY = TRUE,
  preDrawCallback = 
    JS('function() { Shiny.unbindAll(this.api().table().header()); }'),
  drawCallback = 
    JS('function() { Shiny.bindAll(this.api().table().header()); }')
)

It's more idiomatic to use renderDT/DTOutput.

How to scroll a webpage using selenium webdriver in Python without using javascript method execute_script()

If your usecase is to scroll() the window containing the DOM document, there is no better way other then using the either of the following Window Methods:

Window.scrollBy()
Window.scrollTo()

If your usecase is to scroll() an Element there is no better way other then using the Element Method:

Element.scrollIntoView()

You can find a detailed discussion in What is the difference between the different scroll options?

However, if you want to avoid the execute_script() to interact with a WebElement you have two (2) other options available as follows:

Using move_to_element() from selenium.webdriver.common.action_chains. This method will automatically scroll the element within the Viewport.

Example code:

menu = driver.find_element_by_css_selector(".nav")
hidden_submenu = driver.find_element_by_css_selector(".nav #submenu1")
ActionChains(driver).move_to_element(menu).click(hidden_submenu).perform()

Using element_to_be_clickable() from selenium.webdriver.support.expected_conditions. This expected_conditions when used in conjunction with selenium.webdriver.support.wait will automatically scroll the element within the Viewport.
- Example code:
```
WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Cart"))).click()
```