React中如何忽略覆盖元素并滚动其后方元素？

方法一：CSS 事件穿透（最简单） #

直接给 overlay 元素添加 pointer-events: none 样式，它会完全忽略鼠标/滚轮事件，事件会直接传递到下方的 scrollContainer，完全满足你「静态样式不移动、无需切换类名」的需求：

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 关键属性 */
  /* 保留你原有的透明度、边框等样式 */
}

/* 若 overlay 内有需要交互的元素，单独开启事件支持 */
.overlay .your-interactive-element {
  pointer-events: auto;
}

这种方案无需修改 React 代码，纯 CSS 即可实现。

方法二：React 手动监听滚轮事件（更灵活） #

如果需要自定义滚动行为（比如调整滚动速度、添加平滑动画），可以在 overlay 上监听 wheel 事件，手动控制 scrollContainer 的滚动：

import { useRef } from 'react';

function App() {
  const scrollContainerRef = useRef(null);

  const handleOverlayWheel = (e) => {
    e.preventDefault();
    // 直接累加滚动距离，也可替换为 scrollBy 实现平滑滚动
    scrollContainerRef.current.scrollTop += e.deltaY;
  };

  return (
    <div className="App">
      <div className="scrollWrapper">
        <div 
          className="overlay"
          onWheel={handleOverlayWheel}
        >
          <div className="opacity"></div>
          <div className="opacity"></div>
          <div className="border"></div>
          <div className="opacity"></div>
          <div className="opacity"></div>
        </div>
        <div 
          className="scrollContainer"
          ref={scrollContainerRef}
        >
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
          <div className="option">option</div>
        </div>
      </div>
    </div>
  );
}

注意事项 #

• 方法一中的 pointer-events: none 会让 overlay 上所有元素默认失去交互能力，若有需要点击的元素，单独给该元素设置 pointer-events: auto 即可。
• 方法二中的 e.deltaY 代表滚轮滚动的原始距离，你可以通过乘以系数（比如 e.deltaY * 0.5）调整滚动幅度。

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