关于滚动条样式
美化滚动条样式,主要涉及以下几个伪元素属性(注,这里以chrome浏览器作示例)
::-webkit-scrollbar
用于设置滚动条的整体样式
在这里设置宽高,以控制滚动条尺寸,且必须要设置宽高,否则不生效
宽高分别对应 y轴 和 x轴 的滚动条尺寸
若宽高为0,则可隐藏滚动条,但仍可保持滚动
::-webkit-scrollbar-track
滚动条轨道
不设置则不出现轨道
::-webkit-scrollbar-track-piece
没有滑块的滚动条轨道,或者说是内层轨道
同滚动条轨道
::-webkit-scrollbar-thumb
滚动条滑块,即滚动条滚动的部分
必须要设置,否则不会出现滑块
::-webkit-scrollbar-button
滚动条两端的箭头按钮
不设置则不出现
::-webkit-scrollbar-corner
X轴滚动条和Y轴滚动条的交接处
不设置,默认为白色小方块,宽高随X轴和Y轴滚动条尺寸
/* 滚动条所在容器 */ .scroll-container { margin: 10px; width: 500px; height: 150px; overflow: overlay; background-color: #eee; white-space: nowrap; } /* 滚动条整体 */ .scroll-container::-webkit-scrollbar { height: 20px; width: 20; } /* 两个滚动条交接处 -- x轴和y轴 */ .scroll-container::-webkit-scrollbar-corner { background-color: transparent; } /* 滚动条滑块 */ .scroll-container::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } /* 滚动条轨道 */ .scroll-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #ededed; } /* 滚动条两端按钮 */ .scroll-container::-webkit-scrollbar-button { }
分别设置水平和垂直方向上的滚动条
:horizontal
:适用于任何水平方向上的滚动条
:vertical
:适用于任何垂直方向的滚动条
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #eee; // 添加 horizonal ,单独设置水平方向上的 轨道 &:horizontal { background-color: blue; } } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; // 添加 vertical ,单独设置垂直方向上的 滑块 &:vertical { background-color: red; } }
本文参照
作者:Composition
链接:https://juejin.cn/post/6997011443967066143