How to set the style of the scroll bar and display and hide the floating scroll bar

---

1. How to set the style of the scroll bar

1: The default style of the scroll bar (as shown below)

1: html code

// html 代码
<div class="app">
  <div class="box">
      <p>111111</p>
      <p>222222</p>
      <p>333333</p>
      <p>444444</p>
      <p>555555</p>
      <p>666666</p>
      <p>777777</p>
      <p>888888</p>
      <p>999999</p>
      <p>111111</p>
      <p>222222</p>
      <p>333333</p>
      <p>444444</p>
      <p>555555</p>
      <p>666666</p>
      <p>777777</p>
      <p>888888</p>
      <p>999999</p>
      <p>111111</p>
      <p>222222</p>
      <p>333333</p>
      <p>444444</p>
      <p>555555</p>
      <p>666666</p>
      <p>777777</p>
      <p>888888</p>
      <p>999999</p>
      <p>111111</p>
      <p>222222</p>
      <p>333333</p>
      <p>444444</p>
      <p>555555</p>
      <p>666666</p>
      <p>777777</p>
      <p>888888</p>
      <p>999999</p>
  </div>
</div>

2: css code

/* css 代码 */
.app{
    
    
	width: 300px;
    height: 500px;
    background-color: skyblue;
    overflow: scroll;
}
.box{
    
    
    width: 500px;
    height: 1000px;
    background-color: pink;
}

3: renderings

2: CSS sets the properties of the scroll bar (emphasis)

There are mainly the following 7 attributes ( 真正常用的就是前三个)

1, ::-webkit-scrollbar 滚动条整体部分，设置宽度
2, ::-webkit-scrollbar-thumb 滚动滑块
3, ::-webkit-scrollbar-track 滚动条轨道
4, ::-webkit-scrollbar-button Buttons at both ends of the scroll bar
5, ::-webkit-scrollbar-track-piece Inner scrolling groove
6, ::-webkit-scrollbar-corner Corner
7, ::-webkit-resizer Define the style of the drag block in the lower right corner

3: Example of setting the scroll bar

1: css code (add this code on the basis of step 1)

/* 滚动条样式 */
.app::-webkit-scrollbar {
    
    
     width: 4px; /*  设置纵轴（y轴）轴滚动条 */
     height: 4px; /*  设置横轴（x轴）轴滚动条 */
 }
 /* 滚动条滑块（里面小方块） */
 .app::-webkit-scrollbar-thumb {
    
    
     border-radius: 10px;
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: rgba(0,0,0,0.9);
 }
 /* 滚动条轨道 */
 .app::-webkit-scrollbar-track {
    
    
     border-radius: 0;
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     background: red;
 }

2: renderings

3: Precautions for use

（1）你要修改的滚动条应该是父元素的，而不是超出滚动的盒子。
（2）滚动条轨道和滑块的颜色建议分别使用rgba(0,0,0, 0.1)和rgba(0,0,0, 0.2) 较为常用。(As shown in the picture below, the red color is set to better distinguish the color of the slider and the track)

2. The scroll bar is suspended, hidden and displayed

Practical scenario: My computer is the chrome browser used by widnow, and when I write the project, I and the back end 滚动条会在停止滚动后自动隐藏, and then design the other side mac的chrome的滚动条会一直显示. There is a new demand: 默认隐藏滚动条，hover的时候在结果列表区域显示滚动条。without further ado, let's see the effect below.

0. Core syntax

Promise me: Don't write 类名:hover ::-webkit-scrollbar-thumb, 类名::-webkit-scrollbar-thumb :hover , 类名::-webkit-scrollbar-thumb:hover in such a style, 伪元素和伪类选择器之前不加空格 , without spaces, without spaces (say the important thing three times, don't make mistakes and don't doubt yourself).
Example: .app:hover::-webkit-scrollbar-thumb {/* ... */}

/* 正确语法*/
.类名:hover::-webkit-scrollbar-thumb {
    
    /* ... */}

Method 1. Set the scroll bar width to 0px and hove to 4px

(1) css code (the html code is the top one, which has not changed)

.app{
    
    
  width: 300px;
    height: 500px;
    overflow: scroll;
}
.box{
    
    
    width: 500px;
    height: 1000px;
    background-color: pink;
}
/* 滚动条样式 */
.app::-webkit-scrollbar {
    
    
    width: 0px; /*  设置纵轴（y轴）轴滚动条 */
    height: 0px; /*  设置横轴（x轴）轴滚动条 */
}
/* 滚动条滑块（里面小方块） */
.app::-webkit-scrollbar-thumb {
    
    
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
/* 滚动条轨道 */
.app::-webkit-scrollbar-track {
    
    
    border-radius: 0;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.1);
}

/* hover时显色 */
.app:hover::-webkit-scrollbar {
    
    
    width: 4px;
    height: 4px;
}

(2) css code picture description

(3) Effect picture of list hover

Method 2. Set the scroll bar slider and track to transparent color, hover to the color you need

(1) css code (the html code is the top one, which has not changed)

.app{
    
    
    width: 300px;
    height: 500px;
    overflow: scroll;
}
.box{
    
    
    width: 500px;
    height: 1000px;
    background-color: pink;
}
/* 滚动条样式 */
.app::-webkit-scrollbar {
    
    
    width: 4px; /*  设置纵轴（y轴）轴滚动条 */
    height: 4px; /*  设置横轴（x轴）轴滚动条 */
}
/* 滚动条滑块（里面小方块） */
.app::-webkit-scrollbar-thumb {
    
    
    border-radius: 0px;
    background: transparent;
}
/* 滚动条轨道 */
.app::-webkit-scrollbar-track {
    
    
    border-radius: 0;
    background: transparent;
}

/* hover时显色 */
.app:hover::-webkit-scrollbar-thumb {
    
    
    background: rgba(0,0,0,0.2);
}
.app:hover::-webkit-scrollbar-track {
    
    
    background: rgba(0,0,0,0.1);
}

(2) css code picture description

(3) Effect picture of list hover

---

Summarize

Summary 1: How to set the style of the scroll bar

Common properties of CSS setting scroll bars
1, ::-webkit-scrollbar 滚动条整体部分，设置宽度
2, ::-webkit-scrollbar-thumb 滚动滑块
3,::-webkit-scrollbar-track 滚动条轨道

Summary two

伪元素和伪类选择器之前不加空格, the syntax for modifying the scroll bar style in the case of the class name hover is类名:hover::-webkit-scrollbar-thumb {/* ... */}