背景图片attachment设为fixed时Overlay无法通过鼠标点击拖拽滚动的问题求助

我碰到过一模一样的问题！这是浏览器处理background-attachment: fixed时的一个常见事件拦截问题——当页面存在带有这个属性的元素时，浏览器会优先将鼠标拖拽事件绑定到固定背景层，导致上层fixed定位的Overlay里的滚动元素无法响应拖拽操作，不过滚轮不受影响是因为滚轮事件的处理逻辑不同。

下面给你两个可行的解决思路：

方案1：用伪元素替代background-attachment: fixed（推荐） #

把背景图片放到容器的伪元素里，用position: fixed来实现全屏固定背景，这样既保留了背景固定的效果，又不会干扰上层元素的事件传递：

修改后的CSS代码：

html,body{ height:100%; overflow:hidden; }
/* 移除container的background相关属性，改用伪元素 */
.container{ 
  position:relative; 
  display:block; 
  min-height: 100%; 
  height: auto; 
  width:100%; 
  z-index:1; 
}
/* 添加伪元素实现固定背景 */
.container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://image.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg) no-repeat center center;
  background-size: cover;
  z-index: -1; /* 确保伪元素在容器内容下方，且不遮挡Overlay */
}
.container-div-content{ width:100%; position:relative; display:block; height:1800px; }
.overlay{ width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, .2); overflow: hidden; margin-left: auto; margin-right: auto; }
.overlay-div{ position:relative; width:90%; height:300px; z-index:1001; overflow:auto; background: white; margin-left: auto; margin-right: auto; }
.overlay-div-content{ position:relative; display:block; height:600px; width:60%; }

这个方法的核心是把固定背景从容器的background属性转移到独立的伪元素上，让浏览器不再将拖拽事件绑定到容器本身，Overlay的滚动拖拽就能正常响应了。

方案2：调整事件捕获优先级（备选） #

如果一定要保留background-attachment: fixed，可以尝试给Overlay添加pointer-events: auto（不过通常Overlay默认就是这个值），或者给容器添加pointer-events: none，但这样容器里的其他交互元素会失效，所以只适合容器里没有可交互内容的场景：

.container {
  pointer-events: none;
}
.container-div-content {
  pointer-events: auto; /* 如果容器内有需要交互的元素，给它们单独恢复事件 */
}

这个方法通过让容器不捕获鼠标事件，来让Overlay的事件正常传递，但局限性比较大，所以优先推荐方案1。

你可以测试一下方案1的代码，应该能完美解决你的问题，同时保持背景固定的效果。

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