我有一个页面，其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?
当前回答
也许这有点笨拙，但到目前为止还不错。我在angular 9工作。
文件.ts
scroll(el: HTMLElement) {
el.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
. html文件
<button (click)="scroll(target)"></button>
<div #target style="margin-top:-50px;padding-top: 50px;" ></div>
我用边距和填充顶部调整偏移量。
问候!
其他回答
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元素有滚动填充顶部设置，那么也会考虑这一点。
一种解决方案是创建一个相对于目标具有偏移量的不可见临时元素，滚动到它，然后删除它。这也许不是最理想的，但在我工作的环境中，其他解决方案对我不起作用。例如:
const createOffsetElement = (element) => {
const offsetElement = document.createElement('div');
offsetElement.style = `
position: relative;
top: -10em;
height: 1px;
width: 1px;
visibility: hidden;
`;
const inputWrapper = element.closest('.ancestor-element-class');
inputWrapper.appendChild(offsetElement);
return offsetElement;
};
const scrollTo = (element) => {
const offsetElement = createOffsetElement(element);
offsetElement.scrollIntoView({
behavior: 'smooth',
});
offsetElement.remove();
};
我试着使用上面的一些答案，但滚动不起作用。经过一番研究，我注意到滚动位置实际上非常奇怪(甚至是负值)，这是由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'});
}
把我的解决方案留在这里，以防有人想达到和我一样的目标。
在我的例子中，错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说，页面有点长，在手机上则更长。)
我使用下面的代码片段将错误或通知滚动到视图中。
requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end'， behavior: 'smooth' }) ）;
Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动，我添加了相同的替换。
从本质上讲，它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。
基于之前的答案，我在一个Angular5项目中这样做。
开始:
// el.scrollIntoView(true);
el.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
window.scrollBy(0, -10);
但这样会产生一些问题，需要为scrollBy()设置timeout，如下所示:
//window.scrollBy(0,-10);
setTimeout(() => {
window.scrollBy(0,-10)
}, 500);
它在MSIE11和Chrome 68+中工作完美。我没有在FF测试过。500毫秒是我敢说的最短延迟。向下走有时会失败，因为平滑的滚动还没有完成。根据您自己的项目进行调整。
+1到Fred727为这个简单而有效的解决方案。
