CSS 设置滚动条样式的实现
建站知识 2021-07-03 07:55www.168986.cn长沙网站建设
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 // 滚动条的交汇处上用于拖动调整元素大小的小控件 /
可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据狼蚁网站SEO优化伪类来设置)
- :horizontal 水平方向的track、track-piect、thumb
- :vertica 垂直方向的track、track-piect、thumb
- :decrement 向上和向左按钮的button、向上或向左的track-piece
- :increment 向下和向右按钮的button、向下和向右的track-piece
- :start 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的前面
- :end 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的后面
- :double-button 适用于buttons和track pieces,轨道结束的位置是否是一对按钮
- :single-button 适用于buttons和track pieces,轨道结束的位置是否是一个按钮
- :no-button 适用于track pieces,轨道结束的位置没有按钮
- :corner-present 适用于所有scrollbar,滚动条的角落是否存在
- :window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候
- :enabled, :disabled, :hover , :active 这些伪类同样适用
IE中只能修改滚动条颜色
scrollbar-arrow-color:#f2f2f3; /上下箭头/ scrollbar-track-color /底层背景色/ scrollbar-face-color /滚动条前景色,对应thumb/ scrollbar-shadow-color /滚动条边线色,thubm的border/ scrollbar-highlight-color /滚动条整体颜色/ scrollbar-base-color / 滚动条基准颜色 /
参考资料
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键