react 监听页面滚动事件

 componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
 }
 handleScroll=(event)=>{
        //滚动条高度
        let ctx=this;
        let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
        let scrollHeight =document.documentElement.scrollHeight; //滚动内容高度
        if(scrollTop>500){
            ctx.setState({ style: { display: "block", } })
        }else
        {
            ctx.setState({ style: { display: "none", } })
        }
        let res=scrollHeight-scrollTop-clientHeight;
        if(res<=500){
            ctx.setState({ styles: { display: "none", } })
        }else {
            ctx.setState({ styles: { display: "block", } })
        }
 
}