CSS滚动条隐藏与更改

在网页开发的过程中，时常会遇到内容溢出的情况，通常我们会选择添加滚动条来让内容完整显示，但是，默认的滚动条不但不美观，而且会占用位置，让我们的页面显得很不协调，这时就需要用上滚动条隐藏

默认样式：

隐藏滚动条：

.box {
	width: 100px;
    height: 100px
	overflow-y: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}

.box::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}

*注意浏览器兼容

滚动条样式更改：

::-webkit-scrollbar {
	width: 10px;
	/*设置滚动条宽度*/
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #eee;
	/*设置滚动条背景颜色*/
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	/*设置滚动条滑块颜色*/
	border-radius: 5px;
	/*设置滚动条滑块圆角*/
}

以上就是关于CSS中滚动条的相关内容啦，希望能为你带来帮助~