Question

我具有以下结构，Child组件具有一组GrandChild组件-递归生成-因此页面可以具有n个孙子组件-我需要知道页面何时滚动，如果Grandchild元素在Parent上的高度滚动了组件在其他组件Child2上添加一些CSS样式。不确定如何执行此操作？应该是高度计算吗？请帮忙。

 Parent component:

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

      componentDidMount() {

     }

    render() {

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

}

Child1：

class Child1 extends Component {

      componentDidMount() {

      }

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

大孩子：

class GrandChild extends Component {

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

Answer 1

实际上，如果root 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')
        })
    })
}

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

1 个答案: