react.js 自定义滚动事件

onscroll=()=>{
        let ctx = this;
        let clientHeight = ctx.refs.bodyBox.clientHeight; //可视区域高度
        let scrollTop  = ctx.refs.bodyBox.scrollTop;  //滚动条滚动高度
        let scrollHeight = ctx.refs.bodyBox.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", } })
        }
    };

return(
    <div>
         <div style={{width:'600px',height:'600px',overflow: 'scroll'}} onScroll={this.onscroll}  ref="bodyBox">
            滚动区域
         </div>
    </div>
)