我正在使用 ScrollIntoView() 将列表中突出显示的项目滚动到视图中。当我向下滚动时, 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 调用。使用移动 Safari。
您可以使用scrollTop而不是scrollIntoView():
scrollTop
scrollIntoView()
var target = document.getElementById("target"); target.parentNode.scrollTop = target.offsetTop;
jsFiddle:http: //jsfiddle.net/LEqjm/
如果要滚动多个可滚动元素,则需要根据中间元素scrollTop的 s 单独更改每个元素的 。offsetTop这应该为您提供细粒度的控制,以避免您遇到的问题。
offsetTop
编辑: offsetTop 不一定相对于父元素 - 它是相对于第一个定位的祖先。如果父元素未定位(相对、绝对或固定),您可能需要将第二行更改为:
target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;