scroll-margin-top应用

fixed固定导航中例如<a href="#header-3">Jump</a>链接指向当前页中的<h3 id="header-3">Header</h3>。那您会发现固定导航会挡住<h3 id="header-3">Header</h3>。

现在有一种非常简单的方法可以在CSS中进行处理。

h3 {
  scroll-margin-top: 5rem;
}

浏览器兼容看这里。

不过关于CSS Scroll Snap（css滚动捕捉）的内容还真多。

容器上的CSS属性

• scroll-snap-type
• scroll-snap-stop
• scroll-padding
• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-inline
• scroll-padding-inline-start
• scroll-padding-inline-end
• scroll-padding-block
• scroll-padding-block-start
• scroll-padding-block-end

子元素上的CSS属性

• scroll-snap-align
• scroll-margin
• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-inline
• scroll-margin-inline-start
• scroll-margin-inline-end
• scroll-margin-block
• scroll-margin-block-start
• scroll-margin-block-end