javascript - ScrollIntoView()导致整个页面移动

我正在使用ScrollIntoView()将列表中突出显示的元素滚动到 View 中。当我向下滚动时，ScrollIntoView(false)可以正常工作。但是，当我向上滚动时，ScrollIntoView(true)会使整个页面略微移动，这是我认为想要的。
使用ScrollIntoView(true)时，是否有办法避免整个页面移动？

这是我页面的结构-

#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来自ajax调用。使用移动浏览器。

谢谢您的帮助!

最佳答案

您可以使用scrollTop而不是scrollIntoView():

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

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

如果要滚动的滚动元素不止一个，则需要根据中间元素的scrollTop单独更改每个滚动元素的offsetTop。这应该为您提供细粒度的控制，以避免出现问题。

编辑:offsetTop不一定相对于父元素-它相对于第一个定位的祖先。如果父元素未定位(相对，绝对或固定)，则可能需要将第二行更改为:

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

关于javascript - ScrollIntoView()导致整个页面移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11039885/