100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > web前端入门到实战:CSS设置滚动条样式

web前端入门到实战:CSS设置滚动条样式

时间:2024-03-12 08:38:54

相关推荐

web前端入门到实战:CSS设置滚动条样式

webkit滚动条样式重置

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。

2、scrollbar corner为横向和竖向的交叉角区域

3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

组成结构图如下:

一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。

-webkit-scrollbar /* 滚动条整体部分,重置时必须要设置 */-webkit-scrollbar-button /* 滚动条的轨道的两端按钮 */-webkit-scrollbar-track /* 滚动条的轨道(包含thumb和trace-piece)*/-webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/-webkit-scrollbar-thumb /*滚动条里面的小方块*/-webkit-scrollbar-corner /* 垂直和水平的交叉角 */-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置)ÿ

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。