自定义滚动条​

自定义滚动条​

自定义滚动条 ​标准的css属性 ​1、scrollbar-color ​设置滚动条轨道(track)和滑块(thumb)的颜色

cssscrollbar-color: auto | 滑杆颜色 轨道颜色;2、scrollbar-width ​在元素显示滚动条时设置滚动条的最大宽度

cssscrollbar-width: auto | thin | none;auto 就是默认的尺寸,在 Windows 系统下是 17px; thin 是窄滚动条,在 Windows 系统下是 8px; none 没有滚动条,宽度为0,但是内容依然可以滚动

3、scrollbar-gutter ​可以让滚动条出现的时候内容不晃动

cssscrollbar-gutter: auto;

scrollbar-gutter: stable;

scrollbar-gutter: stable both-edges;auto 浏览器默认表现 stable 浏览器提前预留好滚动条的空白区域 both-edges 浏览器在左右两侧同时预留一样的空白位置 目的是让内容局部是绝对居中的

非标准,但是一直被广泛使用的属性 ​::-webkit-scrollbar — 整个滚动条,可以设置为0让滚动条不可见 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块 ::-webkit-scrollbar-track — 滚动条轨道 ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分,不常用,可忽略 ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分,用得少,可忽略 ::-webkit-resizer — 出现在某些元素底角的可拖动调整大小的滑块,例如textarea的右下角那个可拖动区域

相关文章