容器滚动条显示但无法滚动问题求助（附代码）

要实现容器单独滚动，核心是满足两个条件：给容器设固定/最大高度，再开启垂直溢出滚动。如果滚动条显示但没效果，大概率是以下几个细节没处理好，逐一排查：

一、先确认核心属性是否正确设置 #

容器必须有明确的高度限制，不能让它随内容自动撑开，否则滚动条只会摆设。正确写法示例：

.scroll-box {
  /* 用固定高度或max-height都行，比如固定400px，或者占视口80% */
  height: 400px; 
  /* 内容超出时显示滚动条，也可以用overflow-y: scroll强制始终显示 */
  overflow-y: auto; 
  border: 1px solid #eee;
}

如果用height: 100%，必须给它的父元素也设置高度，不然浏览器算不出容器的实际高度，等于没设。

二、检查是否有元素阻止滚动 #

• 看看容器里的子元素有没有加pointer-events: none，这个属性会让鼠标滚动事件传不到容器上，直接去掉就行。
• 检查有没有JS代码用event.preventDefault()阻止了滚动行为，比如某些自定义交互脚本，找到相关代码删掉。

三、排除父元素的干扰 #

如果容器的父元素设置了overflow: hidden，可能会把容器的滚动区域截断，导致滚动失效。确保父元素的溢出设置不会影响容器的滚动空间。

四、移动端额外注意 #

如果是移动端页面，别给容器加touch-action: none，这个属性会禁止触摸滚动，改成touch-action: pan-y或者直接删掉。

完整可运行示例 #

<div class="scroll-box">
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
  <p>这里放大量文本内容...</p>
</div>

<style>
body {
  margin: 20px;
}
.scroll-box {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background: #f8f8f8;
}
</style>

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