设置overflow:scroll的#page容器内图片悬停时鼠标滚轮滚动失效问题求助

这问题我之前做单页项目时也踩过坑，既然不能用pointer-events:none，给你两个实用的解决方案：

方案一：JavaScript事件转发（最直接有效） #

核心思路是监听图片区域的滚轮事件，手动控制滚动容器的滚动行为，把滚轮事件“转移”到#page上。

代码实现：

const pageContainer = document.getElementById('page');
const imageElements = document.querySelectorAll('.image');

imageElements.forEach(imgEl => {
  imgEl.addEventListener('wheel', (event) => {
    // 阻止事件默认行为，避免干扰
    event.preventDefault();
    // 根据滚轮方向控制容器滚动
    pageContainer.scrollBy({
      top: event.deltaY,
      // 可选：开启平滑滚动，去掉的话就是瞬间滚动
      behavior: 'auto' 
    });
  });
});

为什么这个方法有效？ #

当鼠标悬停在图片上时，滚轮事件会被.image容器捕获，我们通过scrollBy方法直接操控#page的滚动，相当于绕过了图片对滚动事件的“拦截”，同时完全不影响你其他业务逻辑。

方案二：利用事件捕获阶段绑定滚动事件 #

如果不想给每个.image单独绑定事件，可以在#page的捕获阶段监听滚轮事件，确保事件能被优先处理：

const pageContainer = document.getElementById('page');

pageContainer.addEventListener('wheel', (event) => {
  // 直接让容器根据滚轮值滚动
  pageContainer.scrollTop += event.deltaY;
}, true); // 第三个参数设为true，开启事件捕获

注意事项 #

这个方法要确保没有其他代码阻止了事件捕获，而且如果你的.image容器里有需要滚轮交互的元素（比如缩放图片），这个方法可能会冲突，所以优先推荐方案一。

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