無聊刷知乎的時候發現了一個前端設計的寶藏網站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 對象的數組。