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

（或更具体地说

scroll-margin-top

或

scroll-margin-bottom

）

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

这对我的情况有帮助 -
HTML

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

Javascript

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

CSS

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

Answer 4

总的来说，这不是很简单（如果我们想要

behavior: smooth

），并且需要以某种方式弄乱 JavaScript。例如，您可以使用 window.scrollTo 并手动计算必要的顶部位置。

但在某些情况下，巧妙地使用 CSS 可以在视觉上达到必要的效果。在您的演示中，您可以使用

padding-top

代替边距，并将块的内容包装到其他辅助容器中。

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

Answer 5

另一个潜在的解决方案是不滚动元素本身，而是滚动到其之前的同级元素之一。示例：

let elementToScrollTo = <yourTargetElement>;
const childOffset = 3;
for (let i = 0; i < childOffset; i++) {
    if (!elementToScrollTo.previousElementSibling) {
       break;
    }
    elementToScrollTo = elementToScrollTo.previousElementSibling;
}
elementToScrollTo.scrollIntoView();