WordPress页面右侧自定义滚动条样式

发布于 2018-11-09  54 次阅读


默认的都是百度的滚动条,这里我们只需要修改一下css即可自定义网站右侧滚动条啦,样式效果,也就是本站正在使用的样式。这里先让我们看看代码吧

/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}
/*—滚动条大小–*/
::-webkit-scrollbar{
width:8px;
height:18px;
}
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}


代码注释的很详细啦,包括自定义粗细,颜色,大小以及背景样式等等,同学们如果感兴趣的话来玩玩,我的网址网页右边的滚动条就是Demo。
注:上面代码加入到我们当前 WordPress 主题的 mian.css 即可,如果您是其他网站源码,直接加入到本站源码调用的css即可。


本当の声を響かせてよ