Emlog修改浏览器滚动条渐变样式 - 会飞的猪

Emlog修改浏览器滚动条渐变样式

作者: 会飞的猪

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

广告位

小编看到很多Emlog站长,其实不只是Emlog网站,还有一些比如WordPress博客,Zblog博客等等这些个人站长博客,在访问他们的网站时候,发现浏览器的默认滚动条非常不好看,其实,如果对于CSS3非常熟悉的站长就知道该如何重置浏览器默认的滚动条样式。001.png

今天小编就简单告诉大家如何操作

找到博客对应的网站模板文件中的主要CSS文件,例如常用的main.css

直接在这些文件中的最顶部(文件内容头部),添加如下CSS代码即可:QQ截图20200226012115.png

代码如下:

/* 滚动条宽度 */
::-webkit-scrollbar {
	width: 12px;
}
/* 滚动条背景 */
::-webkit-scrollbar-track {
	background-color: #ffffff;
	border-left: 1px solid #ccc;
}
/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
	height: 12px !important;
	width: 12px;
    border-radius: 100px;
    background: linear-gradient(red, blue);
}
/* 滚动条颜色鼠标放上去颜色 */
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}
/* 滚动条颜色点击颜色 */
::-webkit-scrollbar-thumb:active {
    background-color: #333;
}

第二种不渐变样式代码如下:

::-webkit-scrollbar-thumb{background-color:#3385ff; -webkit-border-radius:4px; /*border: 2px solid #fff; */}
::-webkit-scrollbar-thumb:hover{background-color:#0566f7;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track-piece{background-color:#fff; -webkit-border-radius:0;}

这些代码其实就是CSS3中的伪类,现在的现代浏览器早已支持了,当然如果还有人在使用远古IE浏览器,那就没有办法了!

分享到:
打赏
-版权声明-

作者: 会飞的猪, 转载或复制请以 超链接形式 并注明出处 会飞的猪
原文地址: 《Emlog修改浏览器滚动条渐变样式》 发布于2020-2-25

阅读时间:   发布于:2020-2-25
文章标题:《Emlog修改浏览器滚动条渐变样式》
本文链接:https://ojbk520.cn:443/post-166.html
本文编辑: 会飞的猪,转载请注明超链接和出处会飞的猪
收录状态:[百度已收录][360未收录][搜狗已收录]

评论一下

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

Emlog修改浏览器滚动条渐变样式

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏