光标悬停fixed定位div时页面无法滚动且禁止点击穿透问题问询

问题原因说明 #

你遇到的不同环境表现不一致的问题，本质是滚动容器的差异导致的：

• 你参考的示例环境用的是默认的window作为滚动载体，fixed定位元素本身不会拦截window的滚轮事件，所以光标落在fixed元素上也能正常滚动页面，同时fixed元素默认会阻挡下层的点击事件，自然符合预期。
• 如果你的项目环境中自定义了滚动容器（比如给html/body设置了height: 100% + overflow: auto/scroll，或者外层套了自定义的滚动div），fixed元素的滚轮事件不会冒泡到自定义滚动容器上，就会出现光标落在fixed元素上无法滚动的问题。

可行解决方案 #

方案1：JS事件接管（兼容性最好，支持fixed元素内部交互） #

不需要修改pointer-events属性，直接通过JS监听fixed元素的滚轮和点击事件，既保证滚动正常，又避免点击穿透：

const fixedElement = document.querySelector('.element');
// 替换为你实际的滚动容器，默认window即可
const scrollContainer = window;

// 接管滚轮事件
fixedElement.addEventListener('wheel', (e) => {
  e.stopPropagation();
  // 同步滚动偏移量到父容器
  scrollContainer.scrollBy({
    top: e.deltaY,
    left: e.deltaX,
    behavior: 'auto'
  });
});

// 阻止点击事件穿透
fixedElement.addEventListener('click', (e) => {
  // 如果fixed元素内部有需要响应点击的子元素，可以在这里加判断逻辑，只拦截非内部交互的点击
  e.stopPropagation();
  e.preventDefault();
});

方案2：还原默认滚动容器（零JS成本） #

如果你的项目没有必须使用自定义滚动容器的需求，直接去掉html/body上的height: 100%、overflow: auto这类限制，还原为默认的window滚动，不需要修改现有CSS，就能实现和示例一致的表现。

方案3：CSS调整（仅适用于fixed元素无内部交互的场景） #

给fixed元素加pointer-events: none，允许滚轮事件穿透到下层滚动容器触发滚动，同时在fixed元素下方加一个和它尺寸、位置完全一致的遮罩层，遮罩层不设置pointer-events: none，专门用来阻挡下层的点击事件，也能满足需求。

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