CSSスクロールバースタイルの美化

スクロールバーの主なプロパティ

1. ::-webkit-scrollbar: スクロールバー全体
2. ::-webkit-scrollbar-thumb: スクロールバー内のスライダー
3. ::-webkit-scrollbar-track: スクロールバーのトラック
4. ::-webkit-scrollbar-button: スクロールバー トラックの両端にあるボタン。クリックすることでスライダーの位置を微調整できます。
5. ::-webkit-scrollbar-track-piece: 内側のトラック、スクロールバーの中央部分
6. ::-webkit-scrollbar-corner: 角、および 2 つのスクロール バーの交差点
7. ::-webkit-resizer: 2 つのスクロール バーの交差点にある、ドラッグして要素のサイズを変更するための小さなコントロール

例

<style>
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
      
      
      width:12px; /* 竖向滚动条宽度 */
      height: 13px; /* 横向滚动条宽度 */
      background-color: #000;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      
      
      /* 其实直接在  ::-webkit-scrollbar 中设置也能达到同样的视觉效果*/
      /* -webkit-box-shadow: inset 0 0 6px rgba(177, 223, 117, 0.7); */
      background-color: #fff;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-button {
      
      
      /* 设置了相关样式，按钮才会出来 */
      background-color: #6868f3;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      
      
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(8, 182, 110, 0.616);
    }

    ::-webkit-scrollbar-thumb:hover {
      
      
      background: rgba(5, 156, 93, 0.719);
      -webkit-box-shadow: unset;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
      
      
      /* 容器不被激活时的样式 */
      background: #ff000066;
    }

    ::-webkit-scrollbar-corner {
      
      
      /* 两个滚动条交汇处边角的样式 */
      background-color: #f34e12;
    }
 </style>

効果