利用原生css实现hash哈希定位跳转偏移量处理
前言
最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为header顶部是fixed浮动的，导致hash跳转的时候会被挡住。
因为hash定位会将元素的顶部与视图顶部对齐，但是也因为如此，导致被浮动元素挡住了内容。
以前我是拦截默认的click事件，然后使用新的定位方法scrollIntoView来实现，通过配置它为居中展示，从而避免这个问题。
最近重构主题的时候，发现这种方式并不优雅，而且很麻烦，有没有办法不依赖js实现呢？
于是我想起以前看过的一篇文章，有一个css属性可以做的，于是找了很久，终于找到了，它就是scroll-padding！
官方定义为：滚动端口的最佳查看区域的偏移量
MDN文档：scroll-padding
支持度如下：
可以看到主流浏览器已经全部支持了，剩下的IE就算了，不考虑，然后就是个别移动端，移动端我的目录树都不展示了，所以使用这个属性非常合适。
这个属性不影响样式哦！
使用
类似于padding的用法，有四个方向，将其写在scroll的容器元素的就行了，比如我的是全局的，所以给html元素设置就行了。
html {
scroll-padding-top: 80px;
}效果非常不错，mdn也有在线例子可以体验。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 2
111
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10