该样式仅限于 Chromium 内核的浏览器,比如谷歌浏览器、QQ 浏览器、360 浏览器等等,非 Chromium 内核的浏览器则不会显示样式,例如火狐浏览器,欧朋浏览器等等。
方法
CSS 元素
::-webkit-scrollbar /* 滚动条整体部分,其中的属性有 width,height,background,border(就和一个块级元素一样)等。*/
::-webkit-scrollbar-button /* 滚动条两端的按钮。可以用 display:none 让其不显示,也可以添加背景图片,颜色改变显示效果。*/
::-webkit-scrollbar-track /* 外层轨道。可以用 display:none 让其不显示,也可以添加背景图片,颜色改变显示效果。*/
::-webkit-scrollbar-track-piece /* 内层轨道,滚动条中间部分(除去)。*/
::-webkit-scrollbar-thumb /* 滚动条里面可以拖动的那部分 */
::-webkit-scrollbar-corner /* 边角 */
::-webkit-resizer /* 定义右下角拖动块的样式 */
样式示例
::-webkit-scrollbar-button {background-color:#FF7677;}
::-webkit-scrollbar-track {background:#FF66D5;}
::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
::-webkit-scrollbar-corner {background:#82AFFF;}
::-webkit-scrollbar-resizer {background:#FF0BEE;}
声明:本文为原创文章,版权归沃付网络所有,欢迎分享本文,转载请保留出处!
你可能也喜欢
- ♥ Java构造方法07/05
- ♥ 网站备份禁忌-站长必看07/05
- ♥ 使用Zxing生成二维码并输出到Web07/05
- ♥ 蜘蛛爬虫构建通畅网站结构07/04
- ♥ PHP无刷新上传文件(非Ajax)07/05
- ♥ Python使用Requests下载时获取实时下载进程07/05