经常看到别的网站的垂直滚动条挺好看的，于是乎chrafz也就折腾了一下，挺简单的几行css，如果你也想拥有更美观的滚动条。复制下面的css代码加在你的style.css文件里就可以了，具体的样式可以设置，挺简单的。
WordPress自定义浏览器滚动条CSS样式 张弦先生のchrafz.com
注：只支持webkit内核的浏览器（也就是不支持ie和火狐）
css如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/*---滚动 条默认显示样式--*/ ::-webkit-scrollbar-thumb{ background-color:#D3D3D3; /*默认状态下的滚动 条颜色*/ height:50px; outline-offset:-2px; outline:2px solid #eee; /*默认状态下的滚动 条轮廓大小及颜色*/ -webkit-border-radius:3px; /*默认状态下的滚动 条圆角*/ border: 1px solid #eee; /*默认状态下的滚动边框大小及颜色*/ } /*---鼠标点击或滑过滚动 条显示样式--*/ ::-webkit-scrollbar-thumb:hover{ background-color:#B1B1B1; /*鼠标滑过的滚动 条轮廓大小及颜色*/ height:50px; -webkit-border-radius:3px; /*鼠标滑过的滚动 条圆角*/ } /*---滚动 条大小--*/ ::-webkit-scrollbar{ width:13px; height:8px; } /*---滚动框背景样式--*/ ::-webkit-scrollbar-track-piece{ background-color:#f8f8f8; /*滚动框背景颜色*/ -webkit-border-radius:0; } |
可以根据注释自己修改颜色、大小、圆角之类的样式，CSS里面hover是设置鼠标悬停的颜色，同样的，active也可以设置鼠标点击的颜色，只要添加如下代码就行
|
1 2 3 4 5 |
::-webkit-scrollbar-thumb:active{ height:50px; background-color:#000; -webkit-border-radius:4px; } |
如果觉得修改CSS麻烦可以安装Custom scrollbar插件
Custom scrollbar是一款可以自定义网站滚动条的WordPress插件。安装简单，插件仅50KB，基本不会影响网站的加载速度，可以自定义滚动条颜色。
支付宝扫一扫
微信扫一扫
