WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： プログラム >JavaScript

iOS15以降に搭載したiPhoneの【Safari】では、画面を下に引っ張ることでもWebページを更新（再読み込み）することが可能となっています。
便利な機能な反面、Webサイト制作時にメインビジュアル内をタッチスクロールをできる仕組みを実装した際、タッチスクロールで一番上に移動する度に再読み込みの処理が走ってしまうという現象が起きてしまいました。
そこで、タッチスクロールをする動きを実装した際に、ブラウザの一番上にきても再読み込みの処理をさせない方法をご紹介致します。

スクロールジャンクについて知ろう

スクロール系のイベント（mousewheel,touchmove,wheelなど）は、スクロールするたびに登録された全てのイベントにpreventDefault()がないか確認が終わるまで処理が行えません。これをスクロールジャンクといいます。
つまりブラウザ側ではスクロールする時に、

• 登録されたタッチイベントの中にpreventDefault()がないかをチェック
• 無いことが確認できてからスクロールを開始

という仕様になっています。
※スクロールジャンクが発生すると、コンソールエラーが出るので確認してみましょう！

またスクロールジャンクを防ぐためにaddEventListenerにはpassive：trueという値が初期値で設定されています。
これは実行前に「preventDefault()実行しませんよ」と明示するものです。

今回は画面内をタッチスクロールで移動する際に、addEventListenerにはpassive：falseにして制御をし、再読み込みをさせないようにしたいのでJavaScriptにて解消していきましょう。記述例は下記になります。

JavaScript記述例

$(function(){
    const mainarea = document.querySelector('.main-area');　//←【１】
    mainarea.addEventListener('touchmove', function(event){
        event.preventDefault(); //←【２】
    }, { passive: false }); //←【３】
});

記述例について解説

【１】
.main-area（タッチスクロールさせたい領域）を、関数mainareaに定義します。

【２】
指の移動で発火する’touchmove’イベント内に、スクロールを登録するイベントリスナーの処理を記述します。
※event.preventDefault()とはブラウザにデフォルトで登録されている処理を無効にする関数です。

【３】
パッシブモードをオフ（false）にすることでバウンススクロール（画面を下に引っ張って再読み込み）を制御することができます。

まとめ

ご紹介したJavaScriptによる制御で、指定したエリア内でタッチイベントが発生している時はブラウザの一番上にきても再読み込みがされなくなります！リロード処理をさせたくない…という場合にぜひ試してみてください。