css为盒子设置滚动条&隐藏滚动条-CSDN博客

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

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

.box {
	width: 300px;
	height: 300px;
}

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

.box {
	width: 300px;
	height: 300px;
	overflow: scroll;
}

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

.box {
    width: 300px;
    height: 300px;
	overflow: auto;
}

隐藏滚动条

.box::-webkit-scrollbar {
  display: none;
}