例1：

handleScroll(e){  
    let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
    let scrollTop  = this.refs.bodyBox.scrollTop;  //滚动条滚动高度
    let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度

  // 滚动条距离指定元素的高度
  // let scrollTop = document.querySelector('dom').getBoundingClientRect().top;

  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(){
        if (window.attachEvent) {  // 兼容ie8      
            window.attachEvent("onscroll", _.throttle(this.handleScroll,300,1000));
        } else if (window.addEventListener) {      
            window.addEventListener("scroll", _.throttle(this.handleScroll,300,1000), false);
        } 
     }

    componentWillUnmount(){
        if (window.detachEvent) {  // 兼容ie8   
            window.detachEvent("onscroll", this.handleScroll);      
        } else if (window.removeEventListener) {     
            window.removeEventListener("scroll", this.handleScroll,false);    
        }
     }



 例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; //滚动内容高度
        // 滚动条距离指定元素的高度
        // let scrollTop = document.querySelector('dom').getBoundingClientRect().top;         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", } })
        }
 }

可以查看后面更新的onwheel 和  onscroll之间的区别