CSS 设置滚动条样式的实现

  发布时间:2019-10-11 15:42:05   作者:xuriliang   我要评论
这篇文章主要介绍了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 // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

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

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

参考资料

Styling Scrollbars | Webkit

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • CSS3改变浏览器滚动条样式

    浏览器滚动条太宽,太丑,影响日常开发怎么办,本文介绍了如何使用CSS3改变浏览器滚动条样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2019-01-04
  • 纯css修改浏览器scrollbar滚动条样式示例

    这篇文章主要介绍了纯css修改浏览器scrollbar滚动条样式示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-23
  • CSS 设置滚动条样式的实例代码

    这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-06
  • 详解css3自定义滚动条样式写法

    这篇文章主要介绍了css3自定义滚动条样式写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-25
  • CSS3自定义滚动条样式的示例代码

    本篇文章主要介绍了CSS3自定义滚动条样式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-21
  • 纯CSS改变webkit内核浏览器的滚动条样式

    这篇文章主要介绍了纯CSS改变webkit内核浏览器的滚动条样式,需要的朋友可以参考下
    2014-04-17
  • css使用overflow属性控制滚动条的样式

    滚动条的样式我们可以通过css来控制的,滚动条样式主要涉及到如下overflow属性,下面简单为大家介绍下具体的控制属性,感性的朋友不要错过
    2013-11-01
  • div css 滚动条样式 DIV滚动条属性及样式设置方式

    所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场,这里为你介绍DIV滚动条
    2012-12-23

最新评论