嵌套固定定位Div滚动条穿透至前景Div的问题求助

方法一：指针事件穿透方案（全浏览器兼容） #

给外层滚动容器设置pointer-events: none，同时单独恢复容器内文本内容块的指针事件，让滚动条区域忽略鼠标事件，确保下方的popover链接能正常响应：

/* 外层滚动容器 */
.container {
  position: fixed;
  height: 300px;
  overflow-y: auto;
  pointer-events: none; /* 让容器（包含滚动条）不接收指针事件 */
}

/* 容器内的文本内容块 */
.container .content {
  pointer-events: auto; /* 恢复内容区域的指针事件，保证正常滚动和文本交互 */
}

/* 确保popover层级高于外层容器 */
.popover {
  position: fixed;
  z-index: 100;
}

方法二：仅禁用滚动条指针事件（WebKit内核浏览器兼容） #

如果只想针对滚动条做处理，不修改容器整体的指针事件，可以给滚动条伪元素设置pointer-events: none：

.container::-webkit-scrollbar {
  pointer-events: none; /* 让滚动条不接收鼠标事件 */
}

/* 保证popover层级优先 */
.popover {
  z-index: 100;
}

原理说明 #

问题核心是浏览器滚动条属于外层容器的一部分，即便视觉上被popover覆盖，鼠标事件仍会被滚动条优先捕获。通过上述CSS设置，让滚动条区域不再响应鼠标事件，事件会自动传递到上层的popover链接，从而解决点击无效的问题。

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