带有边距的scrollIntoView

Question

我有一个网页，希望滚动到特定的元素。

使用scrollIntoView可以实现这一点；但是我想在该元素上方添加一些空间（20px或其他值）。

我目前正在执行以下操作：

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

我想要将页面再向上滚动20px（请参见我的演示）

这是否可能？

- kodeaben

---

请看以下问题/答案：https://dev59.com/UWAf5IYBdhLWcg3wbCN3 - ninja

Answer 1

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

.blue {
  scroll-margin: 20px;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-margin

- colinux

---

这正是我一直在寻找的！非常感谢你！ - KShewengger

Chrome >= 69，FireFox >= 68 链接 - torvin

太好了。在我的情况下， scroll-padding-bottom 确保 scrollIntoView 在我的滚动元素中具有该缓冲区。 - foureyedraven

稍微具体一些：scroll-margin-top: 20px; 的意思是设置滚动容器顶部与其第一个子元素之间的最小距离为20像素。 - Jules Colle

你太厉害了！ - Dilunga the Great

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

---

啊，这对我来说完全有效。我之前使用了scrollIntoView + scrollMarginTop，但由于某种原因，它没有将边距应用到我的列表中的第一个项目。仍然不确定原因，但使用这种方法适用于所有情况。 - sirclesam

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

- Mohsin Mahmood

Answer 4

一般来说，如果我们想要 "behavior: smooth"，那么这并不是非常直接的，需要以某种方式涉及 JavaScript。例如，您可以使用 window.scrollTo 并手动计算所需的顶部位置。

然而，在某些情况下，您可以通过巧妙地使用 CSS 来实现必要的效果。在您的演示中，您可以使用 "padding-top" 而不是 margin，并将块的内容包装到额外的辅助容器中。

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

- dfsq

---

更好的答案：https://dev59.com/nVUL5IYBdhLWcg3wv6Rx#59611245 - benhatsor

Answer 5

另一个可能的解决方案是不滚动到元素本身，而是滚动到它的前一个兄弟元素。例如：

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

- Daniel Veihelmann