CSS 实现滚动条的隐藏但保留滚动功能

CSS 实现滚动条的隐藏但保留滚动功能

有几种方法可以在网页中隐藏滚动条但保留滚动功能，以下是常见的实现方式，使用 CSS：

1. 使用 ::-webkit-scrollbar（适用于 Webkit 内核浏览器，如 Chrome、Safari）

/* 隐藏滚动条但保留滚动功能 */
body {
  /* 针对 Webkit 浏览器 */
  ::-webkit-scrollbar {
    display: none;
  }
  /* 确保内容可滚动 */
  overflow-y: scroll;
}

2. 跨浏览器兼容方案（推荐）

body {
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}

/* Webkit 浏览器 */
body::-webkit-scrollbar {
  display: none;
}

/* 确保内容可滚动 */
body {
  overflow-y: scroll;
}

3. 使用父容器包裹内容

/* 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。
• 测试时确保内容高度或宽度超出容器，以验证滚动效果。