Question

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

使用scrollIntoView，该部分可以正常工作;但我想在元素（20px或其他东西）上添加一些空格

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

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

但我想向上滚动20px（参见我的demo here）

这可能吗？

Answer 1

一般来说，它不是很简单（如果我们想要behavior: smooth），并且需要以某种方式搞乱javascript。例如，您可以使用window.scrollTo并手动计算必要的最高排名。

在某些情况下，您可以通过巧妙地使用CSS在视觉上达到必要的效果。在您的演示中，您可以使用padding-top而不是margin，并将块的内容包装到其他帮助器容器中。

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

Answer 2

另一种可能的解决方案是不滚动元素本身，而是滚动到其先前的同级元素之一。示例：

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

Answer 3

您始终可以使用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);
};

带边距的scrollIntoView

3 个答案: