CSS设置滚动条样式

7次阅读

共计 1415 个字符,预计需要花费 4 分钟才能阅读完成。

webkit 滚动条样式重置

1、scrollbar 包含 scrollbar buttons 和一个 track。track 进一步细分为 track pieces 和 thumb。trace pieces 为 thumb 的上半部分和半下部分。
2、scrollbar corner 为横向和竖向的交叉角区域
3、resize 用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

组成结构图如下:

一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在 css 定义的样式。也就意味值不能单独只设置 scrollbar button 或 scrollbar track。

-webkit-scrollbar  /* 滚动条整体部分,重置时必须要设置 */
-webkit-scrollbar-button  /* 滚动条的轨道的两端按钮  */
-webkit-scrollbar-track /* 滚动条的轨道(包含 thumb 和 trace-piece)*/
-webkit-scrollbar-track-piece /* 轨道中下方块的上下 (左右) 部分 */
-webkit-scrollbar-thumb  /* 滚动条里面的小方块 */
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置):

  • :horizontal 水平方向的 track、track-piect、thumb
  • :vertica 垂直方向的 track、track-piect、thumb
  • :decrement 向上和向左按钮的 button、向上或向左的 track-piece
  • :increment 向下和向右按钮的 button、向下和向右的 track-piece
  • :start 适用于 buttons 和 track pieces, 对象(buttons 或 trace piece)是否放在滑块的前面
  • :end 适用于 buttons 和 track pieces, 对象(buttons 或 trace piece)是否放在滑块的后面
  • :double-button 适用于 buttons 和 track pieces,轨道结束的位置是否是一对按钮
  • :single-button 适用于 buttons 和 track pieces,轨道结束的位置是否是一个按钮
  • :no-button 适用于 track pieces,轨道结束的位置没有按钮
  • :corner-present 适用于所有 scrollbar, 滚动条的角落是否存在
  • :window-inactive 适用于所有 scrollbar, 包含滚动条的区域,焦点不在该窗口的时候
  • :enabled, :disabled, :hover , :active 这些伪类同样适用

IE 滚动条样式重置

IE 中只能修改滚动条颜色

scrollbar-arrow-color:#f2f2f3;  /* 上下箭头 */
scrollbar-track-color  /* 底层背景色 */
scrollbar-face-color   /* 滚动条前景色,对应 thumb*/
scrollbar-shadow-color /* 滚动条边线色,thubm 的 border*/
scrollbar-highlight-color  /* 滚动条整体颜色 */
scrollbar-base-color /* 滚动条基准颜色 */

参考资料

Styling Scrollbars | Webkit

正文完
 0