去掉滚动条的css

百变鹏仔 2个月前 (10-30) #前端问答

文章标签滚动条

在网页设计中，滚动条是常见的网页元素之一。一些网站在设计时，为了美观或者设计需求，在页面中使用了定制化的滚动条。然而，有些场景下，我们可能需要去掉滚动条，比如用于展示图片或者在小屏幕设备上阅读内容时。接下来，我们会介绍如何使用 css 去掉滚动条的方法。

在了解如何去掉滚动条之前，首先要了解网页中滚动条的样式通常由浏览器默认的样式渲染出来的。因此，我们需要在 CSS 样式表中设置样式，以控制浏览器渲染的滚动条。

隐藏滚动条

我们可以使用 overflow 属性隐藏滚动条。首先，将 overflow 设置为 hidden 即可隐藏垂直滚动条，而水平滚动条需要设置 overflow-x: hidden;。

body {  overflow: hidden; /* 隐藏垂直滚动条 */  overflow-x: hidden; /* 隐藏水平滚动条 */}

自定义滚动条样式

另外，如果需要添加一个自定义样式的滚动条，可以使用 ::-webkit-scrollbar 伪元素。该伪元素允许你控制滚动条的样式和外观。我们可以结合 ::-webkit-scrollbar-thumb 伪元素和 ::-webkit-scrollbar-track 伪元素实现自定义样式。

/* 自定义垂直滚动条 */::-webkit-scrollbar {  width: 12px; /* 设置滚动条宽度 */}::-webkit-scrollbar-thumb {  background-color: #ccc; /* 设置滚动条滑块颜色 */}::-webkit-scrollbar-track {  background-color: #fff; /* 设置滚动轨道颜色 */}

利用 JavaScript 实现

在某些情况下，在 CSS 中设置样式并不能完全控制滚动条。比如在 iOS 中，由于 Safari 浏览器使用了自己的滚动条，通过 CSS 设置样式是无法实现控制的。因此，可以使用 JavaScript 实现自定义滚动条。

立即学习“前端免费学习笔记（深入）”；

具体实现可以参考 [SimpleBar](https://github.com/Grsmto/simplebar) 库，该库可以实现类似 Mac OS 中滚动条的效果。在使用前需要导入 SimpleBar 库的 JavaScript 和 CSS 文件，然后在 HTML 中添加一个类名为 simplebar-content 的元素即可。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>使用 SimpleBar 实现自定义滚动条</title>  <link rel="stylesheet" href="simplebar.css"></head><body>  <div class="simplebar-content">    <!-- content goes here -->  </div>  <script src="simplebar.js"></script>  <script>    new SimpleBar(document.querySelector('.simplebar-content'));  </script></body></html>

文章推荐

去掉滚动条的css

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗