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)