css为盒子设置滚动条&隐藏滚动条

省流：为盒子设置宽高，设置滚动条方向，隐藏滚动条。

首先，要为需要添加滚动条的盒子设置固定的高度和宽度，这样才能让内容超过盒子的边缘。

.box {
	width: 300px;
	height: 300px;
}
1
2
3
4

然后，给盒子加入overflow属性，该属性控制了当内容超出盒子边界时发生的事情。我们需要添加的是滚动条，因此设置为“scroll”。注意，如果内容没有超过盒子边缘，滚动条是不会出现的。

.box {
	width: 300px;
	height: 300px;
	overflow: scroll;
}
1
2
3
4
5

此外，还可以使用“auto”属性值。当内容超出盒子边界时，会出现竖直方向的滚动条。如果内容未超出盒子边界，则不会出现滚动条。如果内容同样超出了盒子的水平范围，那么还会出现一个水平方向的滚动条。

.box {
    width: 300px;
    height: 300px;
	overflow: auto;
}
1
2
3
4
5

隐藏滚动条

.box::-webkit-scrollbar {
  display: none;
}
1
2
3