Why Does the Entire Page Move When Using ScrollIntoView(true) in a Fixed-Position List?

ScrollIntoView() and Unintended Page Movement

Question:

When using ScrollIntoView(true) to scroll an item into view in a fixed-position list, why does the entire page move slightly?

Context:

A fixed-position list (#listOfDivs) is loaded via AJAX in Safari on a mobile device. Using ScrollIntoView(false) for downwards scrolling works as expected, but ScrollIntoView(true) for upwards scrolling causes the entire page to move.

Structure:

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div>

Answer:

The default behavior of ScrollIntoView(true) is to scroll the element into view from the top of the viewport. To prevent the entire page from moving, specify the behavior option as smooth, the block option as nearest, and the inline option as start:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Documentation:

Refer to the Mozilla Developer Network (MDN) documentation for details on the ScrollIntoView method: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

The above is the detailed content of Why Does the Entire Page Move When Using ScrollIntoView(true) in a Fixed-Position List?. For more information, please follow other related articles on the PHP Chinese website!