滚动条在不滚动时自动隐藏和滚动时自动显示,不占用网页布局

博客的滚动条有个问题,就是点搜索的时候网页会有一定的偏移。这个问题是由于滚动条占用了DOM,导致当不能滚动的情况下,滚动条不显示导致整体网页会鬼畜一下。其实只要一条css就能搞定。

修正滚动条位置

通过overlay可以将滚动条独立出来。

html {
  overflow-y: overlay;
}

滚动条自动隐藏

滚动条在需要显示的时候显示,在不滚动的时候完全可以隐藏起来。没有滚动条的视觉效果还是很不错的。

引入

引入js地址:

https://cdn.jsdelivr.net/npm/js-heo@1.0.11/hidescrollbar/hidescrollbar.js

引入css地址:

https://cdn.jsdelivr.net/npm/js-heo@1.0.11/hidescrollbar/hidescrollbar.css

参考文档

Javascript监听滚动条滚动停止

最后修改:2024 年 01 月 29 日
如果觉得我的文章对你有用,请随意赞赏