自定义滚动条(css)

一、认识滚动条

::-webkit-scrollbar滚动条整体
::-webkit-scrollbar-thumb滚动条滑块
::-webkit-scrollbar-track滚动条轨道
::-webkit-scrollbar-button滚动条轨道两端按钮
::-webkit-scrollbar-track-piece滚动条内层轨道
::-webkit-scrollbar-corner滚动条交汇处
::-webkit-resizer滚动条的交汇处用于通过拖动调整元素大小的小控件

二、自定义滚动条(css)

::-webkit-scrollbar {
        width: 15px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: lightsteelblue;
      }
      ::-webkit-scrollbar-track {
        background-color: lightgreen;
      }
      ::-webkit-scrollbar-thumb:horizontal {
        background-color: lightseagreen;
      }
      ::-webkit-scrollbar-track:horizontal {
        background-color: lightsalmon;
      }
      ::-webkit-scrollbar-corner {
        background-color: lightcoral;
      }

效果图


三、滚动条可用伪类 

:horizontal适用于水平方向上的滚动条 
:vertical适用于垂直方向上的滚动条 
:decrement适用于使区域向上或者向右移动的按钮 
:increment适用于使区域向下或者向左移动的按钮 
:start表示按钮或轨道碎片是否放在滑块的前面 
:end表示按钮或轨道碎片是否放在滑块的后面
:double-button判断轨道结束的位置是否是一对按钮
:single-button判断轨道结束的位置是否是一个按钮
:no-button表示轨道结束的位置没有按钮。
:corner-present表示滚动条的角落是否存在
:window-inactive适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候

关键字:css、webkit、scroll、滚动条

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值