当我们用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; }
需要注意的是,这些代码不会影响用户拖动页面和使用分页器等功能。