css 去掉浏览器滚动条
导读：今天我们来聊聊如何使用 CSS 去掉浏览器滚动条。首先，让我们来看看默认情况下浏览器的滚动条是怎样的。假设我们有一个很长的页面，会出现纵向滚动条。html { height: 100%; /* 让html元素高度占满整个视口 */ ov...
今天我们来聊聊如何使用 CSS 去掉浏览器滚动条。首先，让我们来看看默认情况下浏览器的滚动条是怎样的。假设我们有一个很长的页面，会出现纵向滚动条。html {
height: 100%;
/* 让html元素高度占满整个视口 */ overflow: auto;
/* 启用纵向滚动条 */}
body {
min-height:100%;
/* 让body元素高度至少占满整个视口 */}
当我们把以上代码放到浏览器中运行后，会发现页面出现了一个灰色的滚动条，我们可以用鼠标滑动来控制页面的滚动。那么，如果我们不想要这个滚动条呢？我们可以使用一些 CSS 属性。body::-webkit-scrollbar {
width: 0.2rem;
height: 0.2rem;
}
body::-webkit-scrollbar-thumb {
border-radius:5px;
background-color: rgba(0,0,0,0.2);
}
第一段代码使用了`::-webkit-scrollbar`伪元素来选择滚动条本身，我们设置其宽高为0.2rem，即把宽和高减小为了0。这样，滚动条就看不到了。第二段代码使用了`::-webkit-scrollbar-thumb`伪元素来选择滚动条上的拖动手柄，我们设置其圆角半径为5px，并为其背景色设置了淡淡的灰色，以作为占位使用。需要注意的是，以上代码只适用于 Chrome 和 Safari 浏览器。当然，还有其他方法可以实现去掉滚动条的效果，比如针对 html 或 body 元素设置`overflow: hidden;
`属性，但这样往往会隐藏掉页面的部分内容，不太友好。因此，使用上述代码可以保证页面内容不会被遮挡，同时又可以去掉滚动条。总之，掌握这些 CSS 技巧可以让我们更好地控制页面样式。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 去掉浏览器滚动条
本文地址： https://pptw.com/jishu/534683.html