使用overflow:hidden后鼠标滚轮失效，求隐藏滚动条仍可滚动方案

一、纯CSS兼容方案（优先推荐） #

直接通过浏览器专属CSS属性隐藏滚动条，同时保留滚动行为，无需JS：

适配所有主流浏览器的写法 #

给目标div替换原有overflow:hidden，改用以下样式：

.target-div {
  overflow: auto; /* 保证内容溢出时可正常滚动 */
  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge 旧版隐藏滚动条 */
  -ms-overflow-style: none;
}

/* Chrome、Safari等webkit内核浏览器隐藏滚动条 */
.target-div::-webkit-scrollbar {
  display: none;
}

说明：用overflow:auto替代hidden是核心，它会在内容溢出时自动启用滚动，再通过各浏览器的专属规则隐藏滚动条，完全不影响滚轮和拖拽滚动的功能。

二、嵌套容器裁剪方案 #

如果上面的CSS伪元素方案在某些特殊场景不生效，可以用双层div的方式实现：

• 外层容器设overflow:hidden，固定宽度
• 内层容器设overflow:auto，宽度比外层多出滚动条的宽度（一般20px左右），让滚动条被外层容器裁剪隐藏

示例代码：

.outer-box {
  width: 300px; /* 外层容器宽度 */
  overflow: hidden;
  height: 400px; /* 按需设置高度 */
}

.inner-box {
  width: calc(100% + 20px); /* 多出滚动条宽度 */
  overflow: auto;
  height: 100%;
}

对应的HTML结构：

<div class="outer-box">
  <div class="inner-box">
    <!-- 你的页面内容 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者czlowieczyna-czan