react获取滚动的高度

例1：

handleScroll(e){  
     let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
    let scrollTop  = this.refs.bodyBox.scrollTop;  //滚动条滚动高度
    let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度
    if((clientHeight+scrollTop)==(scrollHeight)){ //如果滚动到底部 }  }
在render
<div className="contentBox" onScroll={this.handleScroll}  ref="bodyBox">复制代码

 例1：react中如何使用onScroll
 constructor(props){
        super(props)
        this.state = {};
        this.scrollTop = 0;
        this.handleScroll = this.handleScroll.bind(this)

    }

    componentWillMount(){
        window.addEventListener('scroll', this.handleScroll)
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.handleScroll)
    }



 例2：react.js 监听页面滚动事件
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", } })
        }
 }复制代码