React 16中onScroll无法触发的原因及解决方法（偏好onScroll而非onWheel）

我来帮你排查这个问题，结合你给出的代码片段，咱们一步步分析可能的原因，再给出对应的解决办法：

可能的触发失败原因 #

1. 目标元素不满足滚动条件：scroll事件只有当元素的内容超出自身容器范围，并且容器设置了可滚动的样式（比如overflow: auto/scroll）时才会触发。如果你的元素内容高度/宽度没超过容器，或者没设置overflow属性，事件肯定不会触发。
2. 事件监听的捕获阶段设置问题：你代码里第三个参数传了true，表示在捕获阶段监听事件。但大多数情况下，滚动事件是在冒泡阶段传递的，加上父元素如果有阻止冒泡的逻辑，就会导致捕获阶段监听不到事件。
3. 字符串Refs的兼容性问题：React 16.3+已经不推荐使用字符串形式的refs了，这种方式可能存在DOM节点获取不准确的情况，导致你监听的元素根本不是目标元素。
4. 未完整移除事件监听（挂载时节点获取错误也会影响）：你的componentWillUnmount代码没写完，但如果挂载时节点获取错误，也会导致事件绑定失效。

对应的解决方案 #

1. 先确保元素满足滚动条件 #

给目标元素添加固定高度/宽度，并设置overflow属性，比如：

.element-to-fire {
  height: 300px; /* 必须设置固定高度，让内容能超出 */
  overflow-y: auto; /* 垂直方向允许滚动 */
}

同时确保元素内部的内容高度超过这个固定值，这样才会出现滚动条，scroll事件才会被触发。

2. 调整事件监听的阶段 #

把addEventListener的第三个参数改成false（默认就是冒泡阶段），或者直接省略这个参数：

componentDidMount() { 
  const elem = ReactDOM.findDOMNode(this.refs.elementToFire); 
  // 改成冒泡阶段监听，或者直接去掉第三个参数
  elem.addEventListener('scroll', this._fireOnScroll, false); 
}

3. 改用React推荐的Refs方式（更可靠） #

放弃字符串Refs，改用createRef（类组件），避免DOM节点获取错误：

import React from 'react';
import ReactDOM from 'react-dom';

class YourComponent extends React.Component {
  constructor(props) { 
    super(props); 
    this.elementToFire = React.createRef(); // 创建Ref
    this._fireOnScroll = this.fireOnScroll.bind(this); 
  }

  fireOnScroll() { 
    console.log('Fire!'); 
  }

  componentDidMount() { 
    // 通过current获取正确的DOM节点
    const elem = this.elementToFire.current; 
    elem.addEventListener('scroll', this._fireOnScroll); 
  }

  componentWillUnmount() { 
    const elem = this.elementToFire.current; 
    elem.removeEventListener('scroll', this._fireOnScroll); // 完整移除监听
  }

  render() {
    return (
      <div ref={this.elementToFire} className="element-to-fire">
        {/* 这里放置超出容器高度的内容 */}
      </div>
    )
  }
}

4. 直接使用React内置的onScroll属性（最推荐） #

其实React本身就支持onScroll事件，不用手动绑定原生事件，React会自动处理事件的绑定和移除，更符合React的开发模式：

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

  fireOnScroll() { 
    console.log('Fire!'); 
  }

  render() {
    return (
      <div onScroll={this.fireOnScroll} className="element-to-fire">
        {/* 超出容器高度的内容 */}
      </div>
    )
  }
}

总结 #

最常见的问题就是元素不满足滚动条件，所以先检查样式和内容高度；如果没问题，再调整事件监听的方式，优先使用React内置的onScroll，既简洁又可靠。

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