我有一个页面，其中一个滚动条包含从数据库动态生成的带有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滚动边距和滚动填充
你可能想看看新的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元素有滚动填充顶部设置，那么也会考虑这一点。
其他回答
你可以分两步完成:
el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here
UPD:我已经创建了一个npm包，它比下面的解决方案更好，更容易使用。
我的smoothScroll函数
我采用了Steve Banton的出色解决方案，并编写了一个函数，使其使用起来更方便。使用window.scroll()甚至window.scrollBy()会更容易，因为我以前尝试过，但这两个有一些问题:
一切都变成垃圾后，使用他们与平稳的行为。 你无论如何都不能阻止他们，必须等到卷轴的结尾。 希望我的函数对你们有用。此外，还有一个轻量级的填充程序，可以在Safari甚至IE中运行。
下面是代码
照搬就行，想怎么搞就怎么搞。
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
const prepareSmoothScroll = linkEl => {
const EXTRA_OFFSET = 0;
const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
const blockOption = linkEl.dataset.smoothScrollBlock || 'start';
if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
const anchorEl = document.createElement('div');
destinationEl.setAttribute('style', 'position: relative;');
anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);
destinationEl.appendChild(anchorEl);
linkEl.addEventListener('click', () => {
anchorEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
if (blockOption === 'center' || !EXTRA_OFFSET) {
linkEl.addEventListener('click', () => {
destinationEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
};
export const activateSmoothScroll = () => {
const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];
linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};
要创建一个link元素，只需添加以下data属性:
data-smooth-scroll-to="element-id"
还可以将另一个属性设置为加法
data-smooth-scroll-block="center"
它表示scrollIntoView()函数的块选项。默认为start。在MDN上阅读更多。
最后
根据您的需要调整平滑滚动功能。
例如，如果你有一些固定的标题(或者我用单词masthead来称呼它)，你可以这样做:
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
如果你没有这样的情况，那就删除它，为什么不:-D。
解决方案，如果你是使用离子电容器，角材料，并需要支持iOS 11。
document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'});
关键是滚动到父节点的父节点，也就是输入的包装器。这个包装器包含输入的标签，该标签现在不再被切断。
如果你只需要支持iOS 14，“block”中心参数实际上是有效的，所以这是足够的:
document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'});
你也可以使用element.scrollIntoView()选项
el.scrollIntoView(
{
behavior: 'smooth',
block: 'start'
},
);
大多数浏览器都支持
平滑滚动到适当的位置
这是大多数情况下更好的答案。它使用滚动边距和滚动填充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'});
