滚动条样式设置方法

::-webkit-scrollbar使用属性说明 详情见:::-webkit-scrollbar

::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。

备注: 如果没有设置 overflow:scroll;,元素的滚动条将不会显示。

备注: ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器(例如,Chrome、Edge、Opera、Safari、iOS 上所有的浏览器,以及其他基于 WebKit 的浏览器)上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。

CSS 滚动条选择器

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式:

  • ::-webkit-scrollbar——整个滚动条。
  • ::-webkit-scrollbar-button——滚动条上的按钮(上下箭头)。
  • ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track——滚动条轨道。
  • ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
  • ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

CSS使用示例

适用所有可以滚动的元素直接 ::-webkit-scrollbar 开头

 /* 1,滚动条 */
 ::-webkit-scrollbar {
 width: 15px; /* 纵向滚动条 宽度 */
 height: 15px; /* 横向滚动条 高度 */
 background: blue; /* 整体背景 */
 border-radius: 10px; /* 整体 圆角 *
 }
 /* 2,滚动条两端的按钮 */
 ::-webkit-scrollbar-button{
 width: 15px; /* 横向滚动条 宽度 */
 height: 15px; /* 纵向滚动条 高度 */
 background: black;
 border-radius: 10px;
 }
 /* 3,外层轨道 */
 ::-webkit-scrollbar-track {
 /* background: red; */
 border-radius: 10px;
 }
 /* 4.内层轨道,它会覆盖外层轨道的样式。 */
 ::-webkit-scrollbar-track-piece {
 width: 5px;
 background-color:red;
 margin: 0 -2px 0;
 }
 /* 5,滑块 */
 ::-webkit-scrollbar-thumb {
 background: #bec5ca;
 min-height: 50px;
 min-width: 50px;
 border-radius: 10px;
 }
 /* 纵向滑块悬浮 */
 ::-webkit-scrollbar-thumb:vertical:hover {
 background: yellow;
 }
 /* 横向滑块悬浮 */
 ::-webkit-scrollbar-thumb:horizontal:hover {
 background: pink
 }
 /* 6,边角,两个滚动条交汇处 */
 ::-webkit-scrollbar-corner{
 background: blue;
 }

只适用于特定的部分,需要在选择器之前附加元素,添加一个类名,比如

.part::-webkit-scrollbar {
 width: 15px; /* 纵向滚动条 宽度 */
 height: 15px; /* 横向滚动条 高度 */
 background: blue; /* 整体背景 */
 border-radius: 10px; /* 整体 圆角 *
}
作者:fuGUI原文地址:https://segmentfault.com/a/1190000043660995

%s 个评论

要回复文章请先登录注册