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

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

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

.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;

}

推荐链接

 您阅读本篇文章共花了：