自定义页面滚动条

最新推荐文章于 2025-07-28 09:27:46 发布

weixin_30782293

最新推荐文章于 2025-07-28 09:27:46 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huangxiaowen/p/4076922.html

滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。

/* 滚动条 */
::-webkit-scrollbar{ height:7px; width:10px;} //宽度也可用百分比定义

//滚动条里面的滑块
::-webkit-scrollbar-thumb{
min-height:30px;
background: rgba(0,0,0,.5);
border-radius: 100px;
box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.7); }
::-webkit-scrollbar-thumb:active{ background: rgba(0,0,0,.8); }

// 滚动条轨道

//:horizontal(horizontal伪类适用于任何水平方向上的滚动条)

//:vertical(vertical伪类适用于任何垂直方向的滚动条)

::-webkit-scrollbar-track:vertical {
background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,.13)), to(rgba(0,0,0,.13)), color-stop(.5,rgba(0, 0, 0, .05)));
}
::-webkit-scrollbar-track:horizontal{
background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,.13)), to(rgba(0,0,0,.13)), color-stop(.5,rgba(0, 0, 0, .05)));
}

//表示滚动条的角落是否存在

::-webkit-scrollbar-corner{ background:#e7e7e7;}

::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/

}

转载于:https://www.cnblogs.com/huangxiaowen/p/4076922.html