React中临时移除onScroll事件监听器后重新添加的实现方法

首先得说清楚：你找不到DOM元素上的onScroll属性是完全正常的——React采用的是合成事件系统，事件监听器并不是直接绑定在DOM元素本身上，而是由React统一委托到根节点处理的。所以用document.getElementById或者jQuery去查询DOM元素的属性，自然看不到你绑定的this.handleScroll。

下面给你两种可行的方案，按推荐程度排序：

方案一：用React状态控制事件触发（最推荐） #

这种方法不用真的移除事件监听器，而是通过状态开关决定是否执行scroll的处理逻辑，完全符合React的数据流思路，代码也最简洁。

步骤如下：

1. 在组件的state中添加一个控制开关，比如isScrollEnabled，初始值设为true：

constructor(props) {
  super(props);
  this.state = {
    isScrollEnabled: true
    // 你的其他状态
  };
  // 如果不用箭头函数定义handleScroll，记得在这里绑定this
  this.handleScroll = this.handleScroll.bind(this);
}

2. 修改handleScroll方法，先判断状态开关，只有开启时才执行原有逻辑：

handleScroll() {
  if (!this.state.isScrollEnabled) return; // 状态关闭时直接返回，不执行后续逻辑
  
  // 你原来的scroll处理代码
  console.log('scroll事件触发了');
}

3. 临时禁用/重新启用scroll事件：

// 临时禁用scroll事件
this.setState({ isScrollEnabled: false });

// 执行你的特定操作...
doSomething().then(() => {
  // 操作完成后重新启用scroll事件
  this.setState({ isScrollEnabled: true });
});

4. JSX保留原来的写法即可：

<main id="main" onScroll={this.handleScroll}>
  {/* 你的内容 */}
</main>

方案二：直接操作DOM移除/添加原生事件监听器 #

如果你确实需要完全移除事件监听器（比如极端场景下的性能优化），可以用React的ref获取DOM元素，然后用原生的addEventListener和removeEventListener来管理。

注意：这种方法需要把原来的React合成事件换成原生事件绑定，不能混合使用两种方式（否则会重复触发事件）。

步骤如下：

1. 创建ref引用main元素：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.mainRef = React.createRef();
    this.handleScroll = this.handleScroll.bind(this);
  }

2. 组件挂载完成后绑定原生scroll事件：

componentDidMount() {
  this.mainRef.current.addEventListener('scroll', this.handleScroll);
}

3. 组件卸载时移除事件（避免内存泄漏）：

componentWillUnmount() {
  this.mainRef.current.removeEventListener('scroll', this.handleScroll);
}

4. 临时移除和重新添加事件：

// 临时移除scroll监听器
this.mainRef.current.removeEventListener('scroll', this.handleScroll);

// 执行特定操作...
doSomething().then(() => {
  // 重新添加scroll监听器
  this.mainRef.current.addEventListener('scroll', this.handleScroll);
});

5. JSX去掉原来的onScroll属性，换成ref：

<main id="main" ref={this.mainRef}>
  {/* 你的内容 */}
</main>

关键注意点 #

• 不管用哪种方案，handleScroll必须是同一个函数引用——要么用箭头函数定义（比如handleScroll = () => {}），要么在constructor里bind过，这样removeEventListener才能准确找到对应的监听器。如果在render里直接写onScroll={() => this.handleScroll()}，每次render都会生成新的函数，移除时就找不到对应的监听器了。

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