Y轴滚动条可见但无法滚动问题求助

你的代码存在两层滚动容器嵌套的冲突，导致滚轮事件无法正确触发内层滚动：

1. 外层div设置了overflow-y-scroll，但它的内容（内层div，高度20vh）加上pt-60内边距后，总高度远小于max-h-screen，外层的滚动条属于无实际内容可滚动的虚假状态。
2. 内层div是实际需要滚动的容器，但外层的滚动属性会拦截鼠标滚轮事件，导致内层无法响应滚动操作。

修复方案 #

移除外层的overflow-y-scroll属性，仅保留内层容器的滚动设置即可：

<div className="pointer-events-auto fixed top-0 right-0 z-[100000] max-h-screen w-96 bg-gray-700 px-6 pt-60">
       <div className="h-[20vh] overflow-y-scroll text-white">
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
              <p className=" py-5">Content to make parent overflow</p>
        </div>
</div>

额外优化建议 #

如果希望内层容器自动填充外层剩余空间（避免高度固定限制），可以调整外层和内层的高度设置：

<div className="pointer-events-auto fixed top-0 right-0 z-[100000] h-screen w-96 bg-gray-700 px-6 pt-60">
       <div className="h-full overflow-y-scroll text-white">
              <!-- 内容不变 -->
        </div>
</div>

这样内层会自动占满外层除pt-60外的剩余高度，滚动体验更贴合布局需求。

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