13071077710
您的当前位置: 首页 > 前端开发 > html/css > 自定义浏览器滚动条样式

自定义浏览器滚动条样式

时间: 2016-4-17

好的用户体验往往是从一些小细节做起的,毕竟很多浏览器的滚动条样式都没有因为技术升级而被美化,所以不妨自己增加几行代码,在部分浏览器下能看得舒服点。感谢@Aaron

CSS代码如下(适用于chrome浏览器),可放在style.css内容最后。

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

顺带一提,这个自定义样式和之前有提到过的自定义选中文字背景色的方法大同小异,也并不是所有浏览器都支持。如果也想修改选中文字的背景色,可以补充下列CSS代码:

body ::selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}
 
body ::-moz-selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}

Copyright © 2013-2019 子歇    版权所有   网站地图