I am using ScrollIntoView() to scroll the highlighted item in a list into view. When I scroll downwards ScrollIntoView(false) works perfectly. But when I scroll upwards, ScrollIntoView(true) is causing the whole page to move a little which I think is intended.
Is there a way to avoid the whole page move when using ScrollIntoView(true)?
Here is the structure of my page -
<div id="item1"> </div>
<div id="item2"> </div>
<div id="itemn"> </div>
You could use
scrollTop instead of
var target = document.getElementById("target"); target.parentNode.scrollTop = target.offsetTop;
If there's more than one scrollable element that you want to scroll, you'll need to change the
scrollTop of each one individually, based on the
offsetTops of the intervening elements. This should give you the fine-grained control to avoid the problem you're having.
EDIT: offsetTop isn't necessarily relative to the parent element - it's relative to the first positioned ancestor. If the parent element isn't positioned (relative, absolute or fixed), you may need to change the second line to:
target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;