Vue下监听页面滚动以及移动端触摸事件 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)
}

スクロールイベントの情報の取得#

渡されたイベントオブジェクトを使用して、スクロールのプロパティを取得します。

// ページめくり
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("上にスクロール")
    }
}

モバイルのタッチイベント#

モバイルデバイスでは、上記の方法では上下のスクロールを監視できません。おそらく、スマートフォンにはマウスがないためです。
私が望む効果を実現するために、スクロールバーを非表示にし、タッチイベントを監視してユーザーの上下スワイプ操作を判断します。

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座標を取得
    ......
}

これにより、2 つの座標の差を取ることで、ユーザーの上下スワイプを判断できます。

渡されたオブジェクトには、タッチを追跡するための 3 つのプロパティが含まれています：

touches：現在追跡しているタッチ操作の touch オブジェクトの配列です。
targetTouches：イベントターゲットに特定の Touch オブジェクトの配列です。
changeTouches：前回のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列です。