scrollIntoView 滚动得太远

Question

我有一个页面，其中包含从数据库动态生成的带有 div 的表行的滚动条。每个表格行就像一个链接，有点像您在视频播放器旁边的 YouTube 播放列表中看到的。

当用户访问该页面时，他们所在的选项应该转到滚动 div 的顶部。此功能正在运行。问题是它走得太远了。就像他们打开的选项一样，大约 10px 太高了。因此，页面被访问，url 用于识别选择了哪个选项，然后将该选项滚动到滚动 div 的顶部。注意：这不是窗口的滚动条，它是一个带有滚动条的 div。

我正在使用此代码使其将所选选项移动到 div 的顶部：

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

它将它移动到 div 的顶部，但向上移动了大约 10 个像素。

有谁知道如何解决这个问题？

原文由 Matthew Wilson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果它大约是 10px，那么我想你可以像这样简单地手动调整包含 div 的滚动偏移量：

 el.scrollIntoView(true);
 document.getElementById("containingDiv").scrollTop -= 10;

原文由 Lucas Trzesniewski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

平滑滚动到合适的位置

对于大多数情况，这是更好的答案。它使用 滚动边距 和 滚动填充 CSS 规则。下面的解决方案使用 getBoundingClientRect 触发额外的强制布局。

得到 正确的 y 坐标并使用 window.scrollTo({top: y, behavior: 'smooth'})

 const id = 'profilePhoto';
const yOffset = -10;
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

原文由 Arseniy-II 发布，翻译遵循 CC BY-SA 4.0 许可协议