ScrollIntoView() causing the whole page to move
css, javascript
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 `offsetTop`s 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;
Problem
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 id="container"> <div id="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.