我有一个页面，其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?
当前回答
另一个解决方案是使用"offsetTop"，就像这样:
var elementPosition = document.getElementById('id').offsetTop;
window.scrollTo({
top: elementPosition - 10, //add your necessary value
behavior: "smooth" //Smooth transition to roll
});
其他回答
如果它大约是10px，那么我猜你可以简单地手动调整包含div的滚动偏移量，就像这样:
el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;
你可以分两步完成:
el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here
找到了一个变通的解决方案。假设你想滚动到一个div，比如这里的Element，你想在它上面有一个20px的间距。 在上面设置一个已创建的div的ref:
<div ref={yourRef} style={{position: 'relative'， bottom: 20}}/> < / >元素
这样做将创建您想要的间距。
如果你有一个标题，在标题后面创建一个空的div，并给它分配一个与标题高度相等的高度并引用它。
最简单的方法是，
html, body {
scroll-behavior: smooth;
}
html [id], body [id] {
scroll-margin: 50px !important;
}
使用您提供的代码
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.style.scrollMargin = '50px';
el.scrollIntoView(true);
平滑滚动到适当的位置
这是大多数情况下更好的答案。它使用滚动边距和滚动填充CSS规则。 下面的解决方案使用getBoundingClientRect，它会触发一个额外的强制布局。
得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})
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'});
