推荐阅读
当需要某个元素平滑滚动到顶部时，我们会使用：
targetElement.scrollIntoView({ behavior: 'smooth' })
然而，当我们有一个固定的头部时，这样就有问题了——元素确实滚动到顶部了，可是，被头部遮挡了。
这时候，我们就需要 css 的 scroll-margin 来帮忙了。
/* css */
targetElement {
/* 假设头部的高度为 40px */
scroll-margin: 40px;
}
这时候再调用 element.scrollIntoView，element 会自动停到距离顶部 40px（上面声明的值）的位置，问题解决。
以下内容需要配合 scroll-snap-type 使用，建议先了解 scroll-snap-type。
下面的各个属性，建议直接浏览对应的 MDN 文档，毕竟人家还有在线 demo。
看名字就知道，scroll-margin 用于目标元素上，指示元素滚动到目标位置且保留 "margin"。我们看到 margin 就会想到 padding，确实，还有 scroll-padding。scroll-padding 如其名，用于滚动容器上。
我们知道，当我们的滚动容器设置 scroll-snap-type 为 mandatory 时1，滚动起来就像轮播一样，会“吸附”。这时候我们在滚动容器上定义一个 scroll-padding，效果就如同在子元素上定义了 scroll-margin 一样了。
当 scroll-snap-type 为 mandatory 且子级为表现为 inline 时，使用 scroll-x-inline，即：
scroll-margin-inlinescroll-padding-inline当 scroll-snap-type 为 mandatory 且子级为表现为 block 时，使用 scroll-x-block，即：
scroll-margin-blockscroll-padding-block子元素需要设置 scroll-snap-align ↩
如非特别声明，本站作品均为原创，遵循【自由转载-保持署名-非商用-非衍生 创意共享 3.0 许可证】。
对于转载作品，如需二次转载，请遵循原作许可。