自定义webkit内核浏览器滚动条

最新推荐文章于 2023-09-22 09:09:37 发布

VIP文章 FuDesign2008

最新推荐文章于 2023-09-22 09:09:37 发布

阅读量3.3k

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/FuDesign2008/article/details/8120283

版权

webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。

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

::-webkit-scrollbar {
width: 13px;
height: 13px;
}

width和height属性分别表示纵向滚动条的宽度和横向滚动条的高。也可以指定为%百分比，在在这种情况下就代表了，滚动条占整个视窗的百分比，如：

::-webkit-scrollbar {
width: 50%;
}

滚动条包括：滚动按钮和一个轨道。轨道本身有进一步氛围轨道碎片（track pieces）和一个滑块。轨道碎片值滑块上方和下面的区域。滚动条的角合适被设置为各种风格，比如可以调整文本区域的大小。

下面是关于滚动条的所有伪元素：

::-webkit-scrollbar{/*1*/}
::-webkit-scrollbar-button{/*2*/}
::-webkit-scrollbar-track{/*3*/}
::-webkit-scrollba

关注