网站开发 报价单网站批量查询
CSS 实现滚动条的隐藏但保留滚动功能
有几种方法可以在网页中隐藏滚动条但保留滚动功能，以下是常见的实现方式，使用 CSS：
- 使用
::-webkit-scrollbar（适用于 Webkit 内核浏览器，如 Chrome、Safari）
/* 隐藏滚动条但保留滚动功能 */
body {/* 针对 Webkit 浏览器 */::-webkit-scrollbar {display: none;}/* 确保内容可滚动 */overflow-y: scroll;
}
- 跨浏览器兼容方案（推荐）
body {/* 隐藏滚动条 */scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE 和 Edge */
}/* Webkit 浏览器 */
body::-webkit-scrollbar {display: none;
}/* 确保内容可滚动 */
body {overflow-y: scroll;
}
- 使用父容器包裹内容
/* HTML 结构示例：
<div class="wrapper"><div class="content">内容...</div>
</div>
*/.wrapper {height: 100vh; /* 视口高度 */overflow: hidden; /* 隐藏外部滚动条 */
}.content {height: 100%;overflow-y: scroll; /* 内部滚动 */scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE 和 Edge */
}.content::-webkit-scrollbar {display: none; /* Webkit 浏览器 */
}
注意事项：
scrollbar-width和-ms-overflow-style是更现代的跨浏览器解决方案。- 如果只需要隐藏垂直滚动条，使用
overflow-y，如果是水平滚动条，使用overflow-x。 - 测试时确保内容高度或宽度超出容器，以验证滚动效果。