jQuery スマートフォンでスクロールを停止させたい方へ。

17,639

以前作ったスマートフォンのスクロールを停止させる動作がバグッたので改修した時の話です。

一般的にパソコンでの動作の場合は、『overflow: hidden』での画面を固定してスクロール枠を出さないという手段が取れます。

ですが、iOSでは上記の処理が正常に動作しない場合があります。
なので、javascript（というかjQuery）でイベント自体を消してあげるという手段を講じました。
それが以下のやり方です。

// スクロール停止の処理
$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

// スクロール停止することを停止する処理
$(window).off('.noScroll');

// スクロール停止の処理

$(window).on('touchmove.noScroll', function(e) {

e.preventDefault();

});

// スクロール停止することを停止する処理

$(window).off('.noScroll');

上記の処理で無事問題解決と思っていたのですが1か月後、
クライアントから動かなくなった（というかスクロールが動くようになった）と連絡がありました。
動かないようにしてくれとのことです。

前は正常に動作して（スクロール出来ないようになっていた）のになぜだろうと思って調べていると原因が判明しました。

Treat Document Level Touch Event Listeners as Passive

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..

If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.

This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention

Chrome Platform Status

英語が分からないので分かる人に聞いてみました。
つまり『EventListenerにAddした時のpassiveがfalseである意味はないので、trueに変えましたよ。』ということです。

ならpassiveをfalseで指定してあげればいいの？
ということで以下です。

// 停止、開始でfunction書くのが面倒なので1つにまとめます。
var movefun = function( event ){
	event.preventDefault();
}

// スクロール停止の処理
window.addEventListener( 'touchmove' , movefun , { passive: false } );

// スクロール停止することを停止する処理
window.removeEventListener( 'touchmove' , movefun, { passive: false } );