javascript - 在 React 中获取子组件的偏移量/高度

Question

我有以下结构，子组件有一组 GrandChild 组件 - 递归生成 - 所以页面可以有 n 个孙组件 - 如果 Grandchild 元素在父元素上滚动到它的高度，我需要知道页面何时滚动组件在其他组件 Child2 上添加一些 css 样式。不确定该怎么做？那应该是高度计算吗？请帮忙。

 Parent component:

  class Parent extends Component {
      constructor(props) {
        super(props);
        this.blocks = [];
      }

      componentDidMount() {

     }

    render() {

      return (
       <Child1 />
       <Child2 />
       );
    }

}

child 1:

class Child1 extends Component {

      componentDidMount() {

      }

       render() {   
         return (
           <div>
            <GrandChild />
          </div>
         );
       }  
     }

孙子:

class GrandChild extends Component {

       render() {   
         return (
           <div>
            <p class="paragraph" />
          </div>
         );
       }  
     }

Answer 1

实际上，如果根div和元素都具有scroll属性，则它们维护自己的滚动条。您可以使用以下方法为滚动事件添加监听器。

componentDidMount(){
    window.addEventListener('scroll',()=> {
        var header = this.refs.header
        var scrollTop = document.body.scrollTop ||            document.documentElement.scrollTop
        if(scrollTop>300){
            console.log(scrollTop)
        }
        var listener = document.getElementById("Child1")
        listener.addEventListener('scroll',() => {
            console.log('scroll')
        })
    })
}