react中监听页面滚动的高度以及横向滚动的位置

//首先在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理

componentDidMount() {
      window.addEventListener('scroll', this.bindHandleScroll)
}

bindHandleScroll=(e)=>{
 // 滚动的高度(兼容多种浏览器)
const scrollTop = (e.srcElement ? e.srcElement.documentElement.scrollTop : false)  || window.pageYOffset || (e.srcElement ? e.srcElement.body.scrollTop : 0);
	       
 // 判断用户当前是否进行了横向滚动，如果用户发生了横向滚动，则设置元素为static
const scrollLeft = (e.srcElement ? e.srcElement.documentElement.scrollLeft : false) || window.pageXOffset  || (e.srcElement ? e.srcElement.body.scrollLeft : 0);

if(scrollTop>0&&scrollTop<=800){
	(当从上到下滚动为 0-800时，要做的事。。。。。。)
	}else if(scrollTop>800&&scrollTop<=1600){
	          	(当从上到下滚动为 800-1600时，要做的事。。。。。。)
	  }
}
//最后要记得在componentWillUnmount，进行scroll事件的注销，不然消耗性能
componentWillUnmount(){
		   window.removeEventListener('scroll', this.bindHandleScroll);
}

下面介绍一下常用的位置属性以及方法：

1 、 获取浏览器可视区的宽高
    document.documentElement.clientHeight ; 
    document.documentElement.clientWidth ; 
 
 2 、获取内容区域可视区的宽高
    document.body.clientWidth/offsetWidth ; 
    document.body.clientHeight/offsetHeight ; 
    
 3 、获取元素的宽高
    <!--包含border+pdding-->
    obj.offsetWidth/obj.offstHeight ; 
    
    <!--包含padding-->
    obj.clientWidth/obj.clinetHeight ;
    
    <!--不包含border和padding-->
    window.getComputedStyle('div').width/height ; 

4 、获取滚动条的距离
    document.documentElement.scrollTop
    document.documentElement.scrollLeft
 
5 、获取元素的距离可视区的距离
    <!--包含滚动条的距离-->
    obj.offsetLeft/obj.offsetTop
     

 6、 设置滚动的距离：
  div.scrollBy(200, 0) //横向
  div.scrollBy(0, 200) //纵向
  
  7、滚动的位置：
  div.scrollTo(300,100)