javascript - 带边距的 scrollIntoView

Question

我有一个网页，我想滚动到某个元素。

该部分通过使用 scrollIntoView 可以正常工作；但我想在元素上方添加一点空间(20px 或其他)

我目前正在做这样的事情:

const moveToBlue = () => {
  const blue = document.getElementById('blue')
  blue.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start'});
};

不过，我想向上滚动 20 像素(参见我的 demo here)

这可能吗？

Answer 1

您可以在滚动目标元素上设置 scroll-margin CSS 属性。例如

.blue {
  scroll-margin: 20px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin