美化滚动条
程序员文章站
2022-06-07 12:11:04
...
/* 美化滚动条 */
/*IE滚动条颜色设置*/
* {
scrollbar-arrow-color:#777777; /*上下箭头*/
scrollbar-track-color:#E8E8E8; /*底层背景色*/
scrollbar-face-color:#F8F8F8; /*滚动条前景色*/
scrollbar-Shadow-color:#E8E8E8; /*滚动条边线色*/
}
/* firefox 版本63+ 滚动条设置*/
* {
scrollbar-color: #F8F8F8 #E8E8E8;
}
::-webkit-scrollbar
{
width: 14px;
height: 14px;
background-color: white;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 0px;
background-color: #E8E8E8;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 0px;
background-color: #F8F8F8;
border: 1px solid #ABABAB;
}
::-webkit-scrollbar-thumb:hover {
background-color:#F0F0F0;
}
/*滚动条渐增按扭*/
::-webkit-scrollbar-button{
border: 1px solid #ABABAB;
background-color: #F8F8F8;
}
::-webkit-scrollbar-button:hover{
border: 1px solid #ABABAB;
background-color: #E8E8E8;
}
::-webkit-scrollbar-button:vertical:start:decrement{
background: url(../images/up_arrow.png) 2.5px 5px no-repeat;
background-size: 7px 4px;
}
::-webkit-scrollbar-button:vertical:end:increment{
background: url(../images/down_arrow.png) 2.5px 6px no-repeat;
background-size: 7px 4px;
}
/* 定义滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:horizontal:start:decrement {
background: url(../images/left_arrow.png) 5px 2.5px no-repeat;
background-size: 4px 7px;
}
/* 定义滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:horizontal:end:increment {
background: url(../images/right_arrow.png) 6px 2.5px no-repeat;
background-size: 4px 7px;
}
/*内层轨道,滚动条中间部分*/
::-webkit-scrollbar-track-piece{
background-color: #E8E8E8;
}
/*边角,即两个滚动条的交汇处*/
::-webkit-scrollbar-corner{
background-color: #E8E8E8
}
/* 美化滚动条 */
推荐阅读
-
配置H5的滚动条样式的示例代码
-
页面刷新时记住滚动条的位置jquery代码实现方法
-
基于CSS3自定义美化复选框Checkbox组合_html/css_WEB-ITnose
-
php代码美化工具-phpCodeBeautifier[集成在EditPlus]_PHP教程
-
js固定DIV高度,超出部分自动添加滚动条的简单方法_javascript技巧
-
HTML的checkbox和radio的美化_html/css_WEB-ITnose
-
scroll事件实现监控滚动条并分页显示(zepto.js)
-
jquery实现Li滚动时滚动条自动添加样式的方法_jquery
-
jquery easyui滚动条部分设置介绍
-
jQuery select下拉框美化