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

当用户访问该页面时，他们所在的选项应该位于滚动 div 的顶部。此功能正在运行。问题是它有点太过分了。就像他们所在的选项大约高了 10 像素。因此，访问页面时，URL 用于识别选择了哪个选项，然后将该选项滚动到滚动 div 的顶部。注意：这不是窗口的滚动条，而是带有滚动条的 div。

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

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

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

el.scrollIntoView(true);

它将它移动到 div 的顶部，但向上移动了大约 10 个像素。 有人知道如何解决这个问题吗？

平滑滚动到正确位置

Here is 大多数情况下都有更好的答案 https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far/56391657#answer-67923821。它用滚动边距 and 滚动填充CSS 规则。 下面的解决方案使用getBoundingClientRect这会触发额外的强制布局。

Get correct 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'});