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

你可能感兴趣的:(css,css,前端)