Use of css scroll bar

Foreword:

        Use of css scroll bars.

1. Use case 1: no background, only display a scroll bar

If it is the default whole, :: is enough. If it is an element, .abc:: can be used. If it is scss, &::

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

2. Use case 2:

::-webkit-scrollbar {
  width: 6px;
}
//默认不展示
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0);
}
//划过展示，具体写法自己改改
&:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

3、api：

::-webkit-scrollbar //The entire part of the scroll bar
::-webkit-scrollbar-button //Buttons at both ends of the scroll bar
::-webkit-scrollbar-track //Outer track
::-webkit-scrollbar-track-piece //Inner track, middle part of scroll bar (removed)
::-webkit-scrollbar-thumb //The one that can be dragged inside the scroll bar
::-webkit-scrollbar-corner //Corner
::-webkit-resizer / /Define the style of the drag block in the lower right corner

4. Illustration:

Reference link compatible with IE: https://www.cnblogs.com/koley...