前言

最近在写目录树跳转功能的时候,还是遇到之前的那个老大难的问题,就是因为header顶部是fixed浮动的,导致hash跳转的时候会被挡住。

因为hash定位会将元素的顶部与视图顶部对齐,但是也因为如此,导致被浮动元素挡住了内容。

以前我是拦截默认的click事件,然后使用新的定位方法scrollIntoView来实现,通过配置它为居中展示,从而避免这个问题。

最近重构主题的时候,发现这种方式并不优雅,而且很麻烦,有没有办法不依赖js实现呢?

于是我想起以前看过的一篇文章,有一个css属性可以做的,于是找了很久,终于找到了,它就是scroll-padding

官方定义为:滚动端口的最佳查看区域的偏移量

MDN文档:scroll-padding

支持度如下:

可以看到主流浏览器已经全部支持了,剩下的IE就算了,不考虑,然后就是个别移动端,移动端我的目录树都不展示了,所以使用这个属性非常合适。

这个属性不影响样式哦!

使用

类似于padding的用法,有四个方向,将其写在scroll的容器元素的就行了,比如我的是全局的,所以给html元素设置就行了。

html {
  scroll-padding-top: 80px;
}

效果非常不错,mdn也有在线例子可以体验。

分类: CSS 标签: csshash定位跳转偏移量offsetscroll-padding

评论

全部评论 2

  1. 111
    111
    Google Chrome Windows 10
    你可以给你的文章做一个分页展示吗,好累啊翻来翻去
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @111不弄,没啥必要啊

目录