scrollIntoView 带边距答案

【问题标题】：scrollIntoView with marginscrollIntoView 带边距
【发布时间】：2018-09-26 07:05:22
【问题描述】：

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

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

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

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

不过，我想再向上滚动 20 像素（请参阅我的 demo here）

这可能吗？

【问题讨论】：

以下问题/答案：stackoverflow.com/questions/24665602/…

标签： javascript html

【解决方案1】：

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

.blue {
  scroll-margin: 20px;
}

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

【讨论】：

这就是我一直在寻找的！非常感谢！
Chrome >= 69, FireFox >= 68 link
完美。在我的例子中，scroll-padding-bottom 确保 scrollIntoView 在我的滚动元素中有那个缓冲区。
更具体一点：scroll-margin-top: 20px;
你杀了它！

【解决方案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);
};

【讨论】：

【解决方案3】：

一般来说，这不是很简单（如果我们想要behavior: smooth），并且需要以一种或另一种方式弄乱javascript。例如，您可以使用window.scrollTo 并手动计算必要的顶部位置。

但在某些情况下，您可以巧妙地使用 CSS 在视觉上实现必要的效果。在您的演示中，您可以使用 padding-top 代替边距并将块的内容包装到额外的帮助容器中。

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

【讨论】：

更好的答案：stackoverflow.com/a/59611245/13331155

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这对我有帮助——
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;
}

【讨论】：