自定义 Scrollbar

滚动条概述

设置scrollbar的为CSS伪元素,对应上图的数字:

::-webkit-scrollbar              { /* 1 滚动条整体部分 */ }
::-webkit-scrollbar-button       { /* 2 滚动条两端的按钮 */ }
::-webkit-scrollbar-track        { /* 3 外层轨道 */ }
::-webkit-scrollbar-track-piece  { /* 4 内层轨道,滚动条中间部分(除去) */ }
::-webkit-scrollbar-thumb        { /* 5 滑块 */ }
::-webkit-scrollbar-corner       { /* 6 边角 */ }
::-webkit-resizer                { /* 7 定义右下角拖动块的样式 */ }

滚动条设置举例

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar
  width:16px;
  height:16px;
  background-color:#ccc;
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
  background-color:#F5F5F5;
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#555;

滚动条伪类

任何对象的滚动条都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

:horizontal       //适用于任何水平方向上的滚动条
:vertical         //适用于任何垂直方向的滚动条
:decrement        //适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮
:increment        //适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮
:start            //适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的前面
:end              //适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的后面
:double-button    //适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button    //适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button        //表示轨道结束的位置没有按钮。
:corner-present   //表示滚动条的角落是否存在。
:window-inactive  //适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。

举例:

::-webkit-scrollbar-track-piece:start {
  /* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
  /* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  /* Select the down or left scroll button when it's being hovered by the mouse */
}

隐藏滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

参考资料

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress