小编典典

ScrollIntoView() 导致整个页面移动

all

我正在使用 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。


阅读 59

收藏
2022-08-01

共1个答案

小编典典

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

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

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

如果要滚动多个可滚动元素,则需要根据中间元素scrollTop的 s 单独更改每个元素的
offsetTop这应该为您提供细粒度的控制,以避免您遇到的问题。

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

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;
2022-08-01