资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何在CSS中设置滚动条样式

这期内容当中小编将会给大家带来有关如何在CSS中设置滚动条样式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联建站 - 香港机房服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,香港机房服务器托管,西南服务器托管,四川/成都大带宽,机柜大带宽、租用·托管,四川老牌IDC服务商

webkit滚动条样式重置

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar corner为横向和竖向的交叉角区域
3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

组成结构图如下:
 

如何在CSS中设置滚动条样式

一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在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 // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

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

  • :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 /* 滚动条基准颜色 */

上述就是小编为大家分享的如何在CSS中设置滚动条样式了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


文章名称:如何在CSS中设置滚动条样式
浏览地址:http://cdkjz.cn/article/iesios.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220