为什么在固定位置列表中使用 ScrollIntoView(true) 时整个页面会移动？

ScrollIntoView() 和意外的页面移动

问题：

当使用 ScrollIntoView(true) 将项目滚动到在固定位置列表中查看，为什么整个页面会移动稍微？

上下文：

通过 AJAX 在移动设备上的 Safari 中加载固定位置列表 (#listOfDivs)。使用 ScrollIntoView(false) 进行向下滚动可以按预期工作，但是使用 ScrollIntoView(true) 进行向上滚动会导致整个页面滚动

结构：

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

<div>

答案：

ScrollIntoView的默认行为（true）是将元素从视口顶部滚动到视图中。要防止整个页面移动，请将行为选项指定为 smooth，将块选项指定为最接近，并将内联选项指定为开始：

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

文档：

有关 ScrollIntoView 方法的详细信息，请参阅 Mozilla 开发者网络 (MDN) 文档： https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

以上是为什么在固定位置列表中使用 ScrollIntoView(true) 时整个页面会移动？的详细内容。更多信息请关注PHP中文网其他相关文章！