带边距的 scrollIntoView

Question

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

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

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

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

但是，我想向上滚动 20px（请 在此处查看我的演示）

这可能吗？

原文由 kodeaben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

.blue {
  scroll-margin: 20px;
}

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

原文由 colinux 发布，翻译遵循 CC BY-SA 4.0 许可协议

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);
};

原文由 wizzfizz94 发布，翻译遵循 CC BY-SA 4.0 许可协议