html滚动条样式编辑

2019独角兽企业重金招聘Python工程师标准>>>

大家在网上也许看到过各种各样的滚动条,那么在我们的html中呢,滚动条也是可以进行编辑的,

哈哈,是不是很神奇

那么如果我们要自定义滚动条的话,其实也是可以的,

其实就是用到了webkit的一个叫做scrollbar的伪类

这个伪类中有几个点注意一下就可以,

• thumb:滚动条里面的小方块,也就是我们用来拖动的滑块
• track:滚动条的轨道,也就是滑块的拖行范围
• buttons:滚动条的轨道两端的按钮,可以点击它来控制滑块的位置
• corner:两个滚动条交汇的位置.这是指x轴和y轴都能够滑动的前提下
• resizer:两个滚动条的交汇处上用于通过拖动调整元素大小的小控件,这个就是调整元素的控件

ok,下面直接来代码

.demo::-webkit-scrollbar {
      width: 13px;/*对垂直流动条有效*/
      height: 13px;/*对水平流动条有效*/
    }

 

.demo::-webkit-scrollbar-track{
        background-color: #fff;//滚动条轨道的颜色
      }

 

.demo::-webkit-scrollbar-thumb{
        background-color: rgba(0, 0, 0, .1);//小滑块的颜色
        border-radius: 4px;//小滑块的圆角
      }

 

.demo::-webkit-scrollbar-button {
        background-color: #888;//滚动条按钮颜色
        display: none;//不给予呈现
      }

 

转载于:https://my.oschina.net/codingBingo/blog/716068