当我们用CSS设计一个网页时,有时我们会想要去掉滚动条,以便更好地显示我们的页面。下面是一些CSS代码,可以帮助你去除滚动条。
/*隐藏滚动条*/
body::-webkit-scrollbar {
width: 0;
}
/*隐藏滚动条*/
body::-webkit-scrollbar {
display: none;
}以上两个代码块都可以去除滚动条,只是不同的浏览器兼容性不同。第一个代码块是针对webkit内核的浏览器(如Chrome、Safari);第二个代码块是针对所有浏览器的,但是 Edge 浏览器不支持 display:none,需使用 width: 0; 进行兼容。
如果只想去除纵向滚动条,可以使用以下代码:
/* 隐藏纵向滚动条 */
body::-webkit-scrollbar-thumb:vertical {
display:none;
}如果你只想去掉横向滚动条,可以使用以下代码:
/* 隐藏横向滚动条 */
body::-webkit-scrollbar-thumb:horizontal {
display:none;
}需要注意的是,这些代码不会影响用户拖动页面和使用分页器等功能。