CSS scroll bar style beautification

The main properties of the scroll bar

1. ::-webkit-scrollbar: the whole part of the scroll bar
2. ::-webkit-scrollbar-thumb: the slider inside the scroll bar
3. ::-webkit-scrollbar-track: the track of the scroll bar
4. ::-webkit-scrollbar-button: Buttons at both ends of the scrollbar track, allowing fine-tuning of the slider's position by clicking
5. ::-webkit-scrollbar-track-piece: Inner track, the middle part of the scroll bar
6. ::-webkit-scrollbar-corner: the corner, and the intersection of the two scroll bars
7. ::-webkit-resizer: The small control at the intersection of two scroll bars used to resize elements by dragging

example

<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>

Effect