likes
comments
collection
share

【CSS】关于滚动条样式

作者站长头像
站长
· 阅读数 11

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

关于滚动条

（1）先来看看overflow

这个属性用于：在内容超出容器时，如何处理内容的显示

可选值有：

  • 常用的：visible、hidden、scroll、auto、overlay
  • 不常用的：unset、inherit、initial、revert

其它的：

  • overflow生效，容器必须有一个指定的高度

  • overflow实际是overflow-x和overflow-y的简写

    div {
    overflow: hidden;
    /*
    overflow-x: hidden;
    overflow-y: hidden;
    */
}

    • 也可以设置两个属性值，将分别作用于x轴和y轴

      div {
    overflow: auto hidden;
    /*
    overflow-x: auto;
    overflow-y: hidden;
    */
}
（a）visible
  • visible是默认的值，它不会对元素内容作处理，溢出内容会直接显示在容器外部

【CSS】关于滚动条样式

（b）hidden
  • hidden会对溢出内容作裁剪，超出容器的部分不可见，且不会出现滚动条，页面也无法滚动

【CSS】关于滚动条样式

（c）scroll
  • scroll也会对内容作裁剪，但同时也会在容器上呈现出滚动条，可以滚动滚动条来显示溢出的内容

【CSS】关于滚动条样式

（d）auto
  • auto会在内容有溢出时才显示滚动条，没有溢出则不显示滚动条

【CSS】关于滚动条样式

（e）overlay

  • overlay同auto

    • 不同的是，auto显示的滚动条会在容器内占据一个位置，会导致内容发生位移

    • 而overlay则是会覆盖在容器右侧，不会占据位置

【CSS】关于滚动条样式

（2）然后看看滚动条样式

原生的滚动条样式可能并不是那么美观，所以，有时候需要自定义滚动条样式，让其更符合我们的UI设计

（a）伪元素属性

  • 美化滚动条样式，主要涉及以下几个伪元素属性（注，这里以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轴滚动条尺寸

【CSS】关于滚动条样式

/* 滚动条所在容器 */
.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 {
}

【CSS】关于滚动条样式

以上部分，可以用来配置大部分的滚动条样式了

不过更多的还需要搭配伪类来进行一些额外的配置

（b）伪类属性

  • 为了更好的美化滚动条样式，可以搭配一些伪类属性来进行优化

    注：后面使用less语法，方便查看

  • 分别设置水平和垂直方向上的滚动条

    • :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;
    }
}

【CSS】关于滚动条样式

  • 分别设置左右（上下）按钮、区域

    • :decrement、:start：适用于按钮和内层轨道

      • 表示左（上）侧的按钮
      • 表示滑块左侧（上侧）的内层轨道区域

    • :increment、:end：适用于按钮和内层轨道

      • 表示右侧（下侧）按钮

      • 表示滑块右侧（下侧）的内层轨道区域

      注意：只对::-webkit-scrollbar-button、::-webkit-scrollbar-track-piece两个伪元素起作用

    ::-webkit-scrollbar-button {
    // 左侧、上侧
    &:decrement {
        background-color: purple;
    }
    // 右侧、下侧
    &:increment {
        background-color: green;
    }
}
::-webkit-scrollbar-track-piece {
    // 内层轨道 滑块左侧、上侧
    &:decrement {
        background-color: red;
    }
    // 内层轨道 滑块右侧、下侧
    &:increment {
        background-color: blue;
    }
}

【CSS】关于滚动条样式

【CSS】关于滚动条样式

  • :window-inactive：

    • 适用于所有滚动条，当焦点不在滚动条窗口的时候生效

  • 这里还有一些其它伪类，暂时还不知道怎么用

    • :double-button：适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
    • :single-button：适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
    • :no-button：表示轨道结束的位置没有按钮。
    • :corner-present：表示滚动条的角落是否存在。

  • 另外，还可以搭配其它伪类，比如:hover、:active

本人前端小菜鸡，如有不对请谅解