我有一个页面，其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?
当前回答
我有这个，它对我非常有效:
// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'start'});
setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}
希望能有所帮助。
其他回答
2022纯js，平滑滚动，也适用于重新加载的内容
这是我对现代浏览器的解决方案:
document.addEventListener("click", e => {
let anchorlink = e.target.closest('a[href^="#"]');
if (anchorlink) {
e.preventDefault();
let hashval = anchorlink.getAttribute('href')
let target = document.querySelector(hashval)
const yOffset = -75;
const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: 'smooth' });
history.pushState(null, null, hashval)
e.preventDefault();
}
})
click-eventlistener监听文档，因此您不必担心运行时加载或创建的实习链接(例如在wordpress中使用gutenberg)
希望能有所帮助;)
解决方案，如果你是使用离子电容器，角材料，并需要支持iOS 11。
document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'});
关键是滚动到父节点的父节点，也就是输入的包装器。这个包装器包含输入的标签，该标签现在不再被切断。
如果你只需要支持iOS 14，“block”中心参数实际上是有效的，所以这是足够的:
document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'});
如果它大约是10px，那么我猜你可以简单地手动调整包含div的滚动偏移量，就像这样:
el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;
我试着使用上面的一些答案，但滚动不起作用。经过一番研究，我注意到滚动位置实际上非常奇怪(甚至是负值)，这是由Angular在路由器出口中渲染页面的方式引起的。
我的解决方案是从页面顶部开始计算元素的滚动位置。我在模板的开头放置了一个id为start-of-page的元素，通过减去目标片段位置来获得滚动量。
ngAfterViewInit(): void {
this.route.fragment.subscribe(fragment => {
try {
// @ts-ignore
// document.querySelector('#hero').scrollIntoView({behavior:smooth, block: "start", inline: "start"});
// @ts-ignore
// document.querySelector('#' + fragment).scrollIntoView({behavior:smooth, block: "start", inline: "start"});
this._scrollTo('#' + fragment,0);
} catch (e) { };
});
}
private _scrollTo(selector: any, yOffset = 0){
const base = document.querySelector('#start-of-page');
const el = document.querySelector(selector);
// @ts-ignore
const y = el.getBoundingClientRect().top - base.getBoundingClientRect().top;
window.scrollTo({top: y, behavior: 'smooth'});
}
最简单的方法是，
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);
