Javascriptでスマホのスクロールを禁止する
Javascriptでスマホのスクロールを禁止する
メニューを開いている間はスクロールさせないようにするとかでの用途を想定している。
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
document.addEventListener( 'DOMContentLoaded', () => { const stopBtn = document.getElementById( 'off' ); // scrollをoffするためのボタン const startBtn = document.getElementById( 'on' ); // scrollをonするためのボタン // #offをクリックしたら stopBtn.addEventListener( 'click', () => { console.log( 'stop !' ); document.addEventListener( 'touchmove', noscroll, { passive: false } ); // ※1 { passive: false } document.addEventListener( 'wheel', noscroll, { passive: false } ); } ); // #onをクリックしたら startBtn.addEventListener('click', () => { console.log( 'restart !' ); document.removeEventListener( 'touchmove', noscroll, { passive: true } ); // ※2 removeEventListener document.removeEventListener( 'wheel', noscroll, { passive: true } ); }); // 実行したい関数(ここではtouchmoveやwheelをキャンセルすること) function noscroll ( e ) { e.preventDefault(); } } ); |
※1: touchやwheelイベントを設定すると、スクロールをする前にブロックする処理(e.preventDefault()など)がないかを確認するため、非同期のスクロールがブロックされてスクロールがカクつくScroll Jankが発生する。e.preventDefailt()がないことがあらかじめ分かってるときはpassive: trueというオプションをイベントリスナー設定時に付与するとScroll Jankを防ぐ。逆にe.preventDefault()を指定するイベントであればpassive: falseと明示することでe.preventDefailt()があることをブラウザに伝え、意図しない動きを防ぐことができる。なお、jQueryはデフォルトでpassive: trueでfalseにできないためここだけvanillaで書く。
※2: removeEventListenerはaddEventListenerの逆でイベントを解除する。コールバック関数は名前付きのものを用意する必要がある。無名関数では解除できない。
コメント
コメントはありません。