如何设置pointer-events: none实现禁用点击但保留滚动功能？

方案1：拦截点击事件而非使用pointer-events: none #

不要给父容器设置pointer-events: none，而是在容器顶层通过事件监听拦截点击行为：

• 利用事件捕获阶段，优先拦截所有点击事件，阻止其传递和触发默认行为：

const container = document.querySelector('.your-container');
container.addEventListener('click', (e) => {
  e.stopPropagation();
  e.preventDefault();
}, true);

这种方式既可以禁用容器内所有点击响应，又不会影响容器的滚动功能。

方案2：分离遮罩层与滚动容器 #

将遮罩层单独设置为绝对定位元素，与滚动容器分层：

• 滚动容器正常配置overflow: auto/scroll，保留原生滚动能力；
• 遮罩层覆盖在滚动容器上方，设置pointer-events: auto接收点击，同时拦截事件不向下传递：

.scroll-container {
  position: relative;
  overflow: auto;
  width: 300px;
  height: 300px;
}
.mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  pointer-events: auto;
}

document.querySelector('.mask').addEventListener('click', (e) => e.stopPropagation());

这样滚动容器可正常滚动，点击行为会被遮罩层拦截，不会触发下层内容的点击事件。

方案3：修正滚动事件监听目标 #

你之前监听window的scroll事件未触发，是因为滚动行为发生在容器本身而非全局窗口。直接监听滚动容器的scroll事件即可：

const scrollContainer = document.querySelector('.scroll-container');
scrollContainer.addEventListener('scroll', () => {
  // 执行滚动相关逻辑
  console.log('容器滚动触发');
});

补充：pointer-events: none影响滚动的原因 #

pointer-events: none会让元素完全忽略所有指针交互，包括鼠标滚轮触发的滚动事件（部分浏览器默认行为），因此直接给父容器添加该属性会同时禁用点击和滚动，这也是你遇到问题的核心原因。

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