如何设置overflow-y:hidden时仅允许鼠标滚轮垂直滚动且隐藏滚动条

这需求我做项目时也碰到过，直接用overflow-y: hidden;会把滚动功能也一并禁用，得用点小技巧实现「藏滚动条但留滚轮」的效果，给你两个实用方案：

方案一：嵌套容器法（全浏览器兼容） #

核心思路是用外层容器挡住滚动条，内层容器负责实际滚动。外层设overflow: hidden;隐藏溢出内容，内层宽度比外层稍宽，让滚动条刚好藏在外层可视区域外，同时保留滚动功能。

示例代码：

/* 外层容器：隐藏溢出，挡住滚动条 */
.scroll-wrapper {
  width: 300px;
  height: 400px;
  overflow: hidden;
  border: 1px solid #ddd;
}

/* 内层容器：负责滚动，宽度比外层宽20px（适配滚动条宽度） */
.scroll-content {
  width: calc(100% + 20px);
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}

对应的HTML结构：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 这里放你的长内容 -->
    大量需要滚动的内容...
  </div>
</div>

这个方案的优势是兼容所有浏览器（包括IE），唯一小缺点是需要多一层DOM嵌套。

方案二：CSS滚动条伪元素（简洁高效，适配现代浏览器） #

如果你的项目主要面向现代浏览器，可以直接通过CSS伪元素隐藏滚动条，不需要额外嵌套容器：

.scroll-box {
  width: 300px;
  height: 400px;
  overflow-y: auto; /* 保留滚动功能 */
  border: 1px solid #ddd;
}

/* 针对Webkit内核浏览器：Chrome、Edge、Safari */
.scroll-box::-webkit-scrollbar {
  display: none;
}

/* 针对Firefox */
.scroll-box {
  scrollbar-width: none;
}

/* 针对IE 10+ */
.scroll-box {
  -ms-overflow-style: none;
}

这个方案更简洁，不用额外DOM结构，但要注意浏览器兼容性：

• ::-webkit-scrollbar仅支持Webkit内核浏览器
• scrollbar-width是Firefox专属属性
• -ms-overflow-style适配IE10及以上版本

关键提醒 #

别直接给目标元素设overflow-y: hidden;——这个属性会同时禁用滚动功能和隐藏滚动条，这就是你最初遇到问题的根源。上面两个方案都是通过「分离滚动逻辑和隐藏逻辑」来实现需求的。

内容的提问来源于stack exchange，提问作者stranger