Vue下监听页面滾動以及移動端觸摸事件

無聊刷知乎的時候發現了一個前端設計的寶藏網站 awwwards，對上面大佬實現的網站表示望洋興嘆，
但同時自己也躍躍欲試，我也想整一個，萬一整出來了呢。

在上面看到了 Rally 大佬寫的 GlobeKit，感覺是通過監聽滾動事件來進行一個樣式的切換，便去了解了一下如何監聽頁面的滾動事件。

pc 端鼠標滾動監聽#

監聽#

根據不同的瀏覽器，在 mounted 中給頁面添加一個滾動監聽事件，其中的 scrollFun 是監聽到滾動時執行的方法

// 瀏覽器兼容      
 if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
     document.addEventListener("DOMMouseScroll", this.scrollFun, false)
   } else if (document.addEventListener) {
     document.addEventListener("mousewheel", this.scrollFun, false)
   } 
 }

獲取滾動事件的信息#

通過傳遞的 event 對象獲取滾動的屬性

 //滾動翻頁
scrollFun(event: any) {
  // mousewheel事件中的 “event.wheelDelta” 屬性值：返回的如果是正值說明滾輪是向上滾動
  // DOMMouseScroll事件中的 “event.detail” 屬性值：返回的如果是負值說明滾輪是向上滾動
  const delta = event.detail || (-event.wheelDelta);
     if (delta > 0 ) {
       // 向下滾動
       console.log("向下滾動")
     }else if (delta < 0) {
         //向上滾動
         console.log("向上滾動")
     }
 }

移動端的 touch 事件#

移動端的上下滾動並不能用上面的方法監聽，是因為手機沒鼠標吧。
為了實現我想要的效果，我都是直接把滾動條隱藏，然後監聽 touch 事件來自行判斷用戶是否進行一個上滑下滑的操作。

touchstart 事件：當手指觸摸屏幕時觸發，即使已經有一個手指放在屏幕上也會觸發。
touchmove 事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用 preventDefault () 事件可以阻止滾動。
touchend 事件：當手指從屏幕上离開的時候觸發。

事件添加#

雙引號裡是調用的方法

<div id="main" @touchstart="touchstart($event)" @touchend="touchend($event)">

信息的獲取#

通過傳遞的 $event 對象獲取觸摸事件的信息
例：

touchstart(e: any): void{
    this.startY = e.touches[0].pageY //獲取觸摸點的Y軸坐標
}
touchend(e: any): void{
    const moveEndY = e.changedTouches[0].pageY //獲取放開手時Y軸的坐標
    ......
}

這樣通過兩個坐標的相減，我們通過正負即可判斷用戶的上下滑動。

傳遞過來的對象包括了三個用於跟踪觸摸的屬性：

touches：表示當前跟踪的觸摸操作的 touch 對象的數組。
targetTouches：特定於事件目標的 Touch 對象的數組。
changeTouches：表示自上次觸摸以來發生了什麼改變的 Touch 對象的數組。