scroll-margin-top应用

2020-06-1992次阅读css

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属性

子元素上的CSS属性

上一篇: HTML 5中使用DataList标签  下一篇: HTML5 video视频的playsinline局部播放  

scroll-margin-top应用相关文章