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

修正滚动条位置

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

1
2
3
html {
overflow-y: overlay;
}

滚动条自动隐藏

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

Demo

本站采用该滚动条方案

引入

引入js地址:

1
https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/hidescrollbar/hidescrollbar.js

引入css地址:

1
https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/hidescrollbar/hidescrollbar.css

参考文档

Javascript监听滚动条滚动停止