使用 scroll-margin 优化页面内滚动

问题

当需要某个元素平滑滚动到顶部时，我们会使用：

targetElement.scrollIntoView({ behavior: 'smooth' })

然而，当我们有一个固定的头部时，这样就有问题了——元素确实滚动到顶部了，可是，被头部遮挡了。

解决方案：scroll-margin

这时候，我们就需要 css 的 scroll-margin 来帮忙了。

/* css */
targetElement {
  /* 假设头部的高度为 40px */
  scroll-margin: 40px;
}

这时候再调用 element.scrollIntoView，element 会自动停到距离顶部 40px（上面声明的值）的位置，问题解决。

兼容性

Can I use: scroll-margin?

扩展

以下内容需要配合 scroll-snap-type 使用，建议先了解 scroll-snap-type。

下面的各个属性，建议直接浏览对应的 MDN 文档，毕竟人家还有在线 demo。

scroll-padding

看名字就知道，scroll-margin 用于目标元素上，指示元素滚动到目标位置且保留 "margin"。我们看到 margin 就会想到 padding，确实，还有 scroll-padding。scroll-padding 如其名，用于滚动容器上。

我们知道，当我们的滚动容器设置 scroll-snap-type 为 mandatory 时¹，滚动起来就像轮播一样，会“吸附”。这时候我们在滚动容器上定义一个 scroll-padding，效果就如同在子元素上定义了 scroll-margin 一样了。

scroll-x-inline & scroll-x-block

scroll-x-inline

当 scroll-snap-type 为 mandatory 且子级为表现为 inline 时，使用 scroll-x-inline，即：

• scroll-margin-inline
• scroll-padding-inline

scroll-x-block

当 scroll-snap-type 为 mandatory 且子级为表现为 block 时，使用 scroll-x-block，即：

• scroll-margin-block
• scroll-padding-block

scroll-xx-direction

• scroll-xx-start
• scroll-xx-end
• scroll-xx-top
• scroll-xx-bottom
• scroll-xx-left
• scroll-xx-right