Reactjs 反应&x2014；父元素的onScroll侦听器？

如何在组件中添加onScroll侦听器以捕获父元素的滚动

class ChildDiv extends React.Component {
  constructor() {
    super();
  }
  handleScrollOfParent() {
    // do stuff when parent <main> scrolls;
  }
  render() {
    return (
      <div id="child" onScroll={this.handleScrollOfParent.bind(this)}>
        // content with overflow: hidden and scroll handled by parent MAIN.
      </div>
    )
  }
}
export default ChildDiv;

类ChildDiv扩展了React.Component{
构造函数（）{
超级（）；
}
handleScrollOfParent（）{
//当父母滚动时做一些事情；
}
render（）{
返回(
//溢出内容：隐藏和滚动由父MAIN处理。
)
}
}
导出默认的ChildDiv；

---

在父主视图中呈现，如下图所示，我想捕捉主视图的滚动。

您可以在父组件中定义一个状态变量，该变量将存储当前的滚动顶值（假设垂直滚动）并在每次发生

滚动

事件时更新，然后将此变量传递给

ChildDiv

，该变量可检测到

组件WillReceiveProps中的变量已更改

：

if(this.props.yourVariable != nextProps.yourVariable){
// scroll event was fired => scroll position changed
}

---

根据React的性质，它将道具从父元素传递到子元素，因此当您希望子元素更新其父元素时，需要在父元素上创建一个函数，并将道具作为道具传递给子元素

另请参阅我对类似问题的回答（如何触发父组件从子/孙/曾孙执行某些操作）：

在您的情况下，我们可以这样做：

1/在父级上创建一个函数，触发父级本身执行某些操作：

import React from 'react';

class Parent extends React.Component {

  constructor(props) {
    super(props);
    // ...
  }

  doSomeThingOnParent = () => {
    // do whatever you want with this Parent component, setState, forceUpdate etc.
  }

  render(){
    // ...
    <Child doSomeThingOnParent={this.doSomeThingOnParent} />
    // ...
  }
}

从“React”导入React；
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
// ...
}
doSomeThingOnParent=（）=>{
//使用此父组件、setState、forceUpdate等执行任何操作。
}
render（）{
// ...
// ...
}
}

2/在子组件上，使用onScroll触发上述功能：

class Child extends React.Component {
  ...
  render() {
    return (
      <div id="child" onScroll={this.props.doSomeThingOnParent}>
        // your content
      </div>
    )
  }
}

类子级扩展React.Component{
...
render（）{
返回(
//你的内容
)
}
}

但是，您不能使用上述方式呈现父对象，即：

您应该像上面的父级渲染方法一样使用，并将CSS设置为允许子组件溢出

您可以：

1） 尝试从子组件获取父节点：

componentDidMount() {
  ReactDOM.findDOMNode(this).parentNode.addEventListener(...
}

2） 将父节点作为道具传递，并在渲染后附加侦听器：

在父项中：

render{
  return(
    <div className="parent" ref={(elem)=>{this.node=elem}}>
      <Child parentNode={this.node}/>
    </div>
  )
}

---

您找到解决方案了吗？我刚刚在下面发布了一个答案，因为参考将有助于在您的childDiv组件中收听“main”的滚动事件。op特别指出，他们希望捕捉

main

的滚动事件，而不是

child

。在您的示例中，您展示了如何在main中获取子滚动事件，而这恰恰相反@igorsvee的解决方案可以实现OP的要求。另一种解决方案是在父组件中使用滚动处理程序，然后在子组件中使用

@vinnymac上的

ref

调用一个方法谢谢你的评论，这里似乎真的发生了误解^^^实际上OP的第一句话是“如何在组件中添加onScroll侦听器以捕获父元素的滚动？“，这将我引向上述示例。然而，OP的代码示例以某种方式显示了相反的方式^^^因此，实际上，如果确实请求了相反的方式，那么您是对的，使用componentWillReceiveProps可以实现这一点。谢谢这就是“如何在组件中添加onScroll侦听器以捕获父元素的滚动”的真正答案

componentWillReceiveProps(newProps){
  newProps.parentNode.addEventListener(...
}