我有一个页面，其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?
当前回答
我添加这些css技巧给那些没有解决这个问题的解决方案:
#myDiv::before {
display: block;
content: " ";
margin-top: -90px; // adjust this with your header height
height: 90px; // adjust this with your header height
visibility: hidden;
}
其他回答
最简单的方法是，
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);
20秒内搞定:
这个解属于@ arsenie - ii，我只是把它简化成一个函数。
function _scrollTo(selector, yOffset = 0){
const el = document.querySelector(selector);
const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
使用方法(您可以在StackOverflow中打开控制台并进行测试):
_scrollTo('#question-header', 0);
我目前正在生产中使用它，它工作得很好。
假设你想滚动到DOM中相同级别的div，并且类名为“scroll-with-offset”，那么这个CSS将解决这个问题:
.scroll-with-offset {
padding-top: 100px;
margin-bottom: -100px;
}
与页面顶部的偏移量为100px。它只会像block: 'start'那样工作:
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
所发生的事情是div的顶部在正常位置，但它们的内部内容开始低于正常位置100px。这就是padding-top:100px的作用。margin-bottom: -100px用来抵消下面div的额外边距。 为了使解决方案完整，还添加了这个CSS来抵消最顶部和最底部div的边距/填充:
.top-div {
padding-top: 0;
}
.bottom-div {
margin-bottom: 0;
}
CSS滚动边距和滚动填充
你可能想看看新的CSS属性滚动填充和滚动边距。可以对滚动容器(在本例中为html)使用滚动填充，对容器内的元素使用滚动边距。
在你的例子中，你想为你想要滚动到视图中的元素添加scroll-margin-top，如下所示:
.example {
scroll-margin-top: 10px;
}
这会影响scrollIntoView代码，如下所示:
const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});
这将导致视口滚动以使视口的上边界与元素的上边界对齐，但有10px的额外空间。换句话说，元素的这些属性被考虑在内:
padding-top border-top scroll-margin-top (而不是margin-top)
此外，如果html元素有滚动填充顶部设置，那么也会考虑这一点。
你也可以使用element.scrollIntoView()选项
el.scrollIntoView(
{
behavior: 'smooth',
block: 'start'
},
);
大多数浏览器都支持
