ScrollIntoView() causing the whole page to move

Issue

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 –

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

<div="container">
    <div="content"> 
         <div id="listOfDivs"> 
             <div id="item1"> </div>
             <div id="item2"> </div>
             <div id="itemn"> </div>
         </div>
    </div>
</div>

listOfDivs is coming from ajax call. Using mobile safari.

Solution

You could use scrollTop instead of scrollIntoView():

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle: http://jsfiddle.net/LEqjm/

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;

Answered By – Brilliand

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)