滚动条
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
- 我在容器内部
<div class="scroll-container">
<ul>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
<li>我在容器内部</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.scroll-container {
max-height: 200px;
overflow-y: scroll;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-track {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
.scroll-container::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #68b1ed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17