javascript - 带有边距的scrollIntoView

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

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

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

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

不过，我想再向上滚动20像素(请参阅demo here)

这可能吗？

最佳答案

通常，它不是很简单(如果我们需要behavior: smooth)，并且需要以一种或另一种方式弄乱javascript。例如，您可以使用window.scrollTo并手动计算必要的最高排名。

但是，在某些情况下，可以通过聪明地使用CSS在视觉上实现必要的效果。在您的演示中，您可以使用padding-top代替空白，并将块的内容包装到其他帮助容器中。

演示:https://codepen.io/anon/pen/OvKQLV

关于javascript - 带有边距的scrollIntoView，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49859042/