Javascript 滚动到带边框的视图中

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

通过使用

滚动视图

，该部分工作正常；但我想在元素上方添加一点空间（

20px

或其他）

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

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

不过，我想进一步向上滚动20px（参见我的）

---

这可能吗

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

行为：平滑
），需要以某种方式处理javascript。例如，您可以手动使用和计算必要的顶部位置

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

演示：
您可以在滚动目标元素上设置
滚动边距
CSS属性。比如说

.blue {
  scroll-margin: 20px;
}

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

让elementtoscollto=；
常数childOffset=3；
for（设i=0；i
您可以始终使用
scrollTo
首先使用
getBoundingClientRect
获取元素坐标，然后添加滚动偏移量并获取滚动边距。e、 g

constmovetoblue=（）=>{
const blue=document.getElementById（'blue'）；
让position=blue.getBoundingClientRect（）；
//滚动到元素上方的20px
window.scrollTo（position.left，position.top+window.scrollY-20）；
};
这对我的情况很有帮助-


HTML

CSS

以下问题/答案：这就是我一直在寻找的！非常感谢你！Chrome>=69，FireFox>=68完美。在我的例子中，scroll padding bottom确保scrollIntoView在我的滚动元素中有缓冲区。这应该是可以接受的答案。更具体一点：
scroll margin top:20px
<div class='stick-to-top'></>

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

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