带有边距的scrollIntoView

Question

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

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

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

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

但是，我想进一步向上滚动20像素（在此处查看我的演示）

这可能吗？

Answer 1

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

.blue {
  scroll-margin: 20px;
}

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

Answer 2

您始终可以scrollTo通过首先获取元素坐标，getBoundingClientRect然后添加滚动偏移量并获取滚动边距来使用。例如

const moveToBlue = () => {
  const blue = document.getElementById('blue');
  let position = blue.getBoundingClientRect();
  // scrolls to 20px above element
  window.scrollTo(position.left, position.top + window.scrollY - 20);
};

Answer 3

这对我的情况有帮助 \xe2\x80\x94\n
\nHTML

\n

<div class='stick-to-top'></>\n

\n

JavaScript

\n

document.getElementsByClassName('stick-to-top')[0].scrollIntoView({behavior: "smooth", block: "center"});\n

\n

CSS

\n

.stick-to-top {\n padding-bottom: 400px;\n}\n

\n