原生js的scroll和touch事件

1.各屬性的所表明的區域

網頁可見區域寬：document.body.clientWidth

網頁可見區域高：document.body.clientHeight 

網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 

網頁可見區域高：document.body.offsetHeight (包括邊線的寬) 

網頁正文全文寬：document.body.scrollWidth  

網頁正文全文高：document.body.scrollHeight  

網頁被捲去的高：document.body.scrollTop  

網頁被捲去的左：document.body.scrollLeft 

網頁正文部分上：window.screenTop 

網頁正文部分左：window.screenLeft 

屏幕分辨率的高：window.screen.height 

屏幕分辨率的寬：window.screen.width 

屏幕可用工做區高度：window.screen.availHeight 

屏幕可用工做區寬度：window.screen.availWidth 

各屬性在不一樣瀏覽器下的差別及兼容問題：blog.csdn.net/lhjuejiang/…

2.touch事件

touchstart事件：當手指觸摸屏幕時候觸發，即便已經有一個手指放在屏幕上也會觸發。 　

touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件能夠阻止滾動。 　　

touchend事件：當手指從屏幕上離開的時候觸發。

touchcancel事件：當系統中止跟蹤觸摸的時候觸發。關於這個事件的確切出發時間，文檔中並無具體說明，我們只能去猜想了。  

3.每一個touch事件包含的屬性

clientX：觸摸目標在視口中的x座標。

clientY：觸摸目標在視口中的y座標。

identifier：標識觸摸的惟一ID。

pageX：觸摸目標在頁面中的x座標。

pageY：觸摸目標在頁面中的y座標。

screenX：觸摸目標在屏幕中的x座標。

screenY：觸摸目標在屏幕中的y座標。

target：觸目的DOM節點目標。

touch事件及屬性詳解：blog.csdn.net/lee_magnum/…

4.針對微信內置瀏覽器下拉出現網址的問題

window.addEventListener('touchmove', e => {
    e.preventDefault()
  },{ passive: false }
)
複製代碼

經過上面的代碼能夠成功阻止微信內置瀏覽器的下拉出現網址的問題，但也會影響scroll事件。

故對e.preventDefault()事件添加判斷條件：

下拉事件是在滾動條出如今頁面頂部，touchmove時纔出現，上面代碼阻止了全部的touchmove觸發的事件，這裏只須要在touchmove的pageY>touchstartY,且document.body.scrollTop===0時阻止觸發瀏覽器默認事件便可。

（document.body.scrollTop會有兼容性問題，改用document.documentElement.scrollTop || window.pageYOffset代替）

5.代碼部分

window.addEventListener('scroll', () => {      
    let scrollHeight = document.documentElement.scrollTop || window.pageYOffset      
    this.scrollHeight = scrollHeight      
    let dHeight = document.body.offsetHeight      
    let wHeight = window.screen.height      
    if (scrollHeight >= dHeight - wHeight) { 
    //滾動條滾動到頁面底部 
      doSomething()      
    }    
  })    
  window.addEventListener('touchstart', e => {      
    this.startY = e.targetTouches[0].clientY      
    this.startPageY = e.targetTouches[0].pageY    
  })    
  window.addEventListener('touchmove', e => {      
    this.moveY = e.targetTouches[0].clientY - this.startY      
    this.movePageY = e.targetTouches[0].pageY - this.startPageY      
    // 當滾動條位於頂部，執行下拉操做時，阻止瀏覽器默認事件 
    if (this.movePageY > 0 && this.scrollHeight === 0) {        
      e.preventDefault()      
    }      
    if (this.movePageY < 150) {  //下拉距離小於150px
       this.pullDownMessage = '下拉刷新'      
    } else {        
      this.pullDownMessage = '釋放當即刷新'      
    }    
  }, { passive: false })    
  window.addEventListener('touchend', e => {      
    this.endY = e.changedTouches[0].clientY      
    this.movePageY = e.changedTouches[0].pageY - this.startPageY
    if(this.endY-this.startY>150){ //手指離開屏幕時的位置與手指接觸屏幕時位置相差150
        doSomething()
    }    
  }) 複製代碼