当サイトではCookieを使用します。Cookieの使用に関する詳細は「プライバシーポリシー」をご覧ください。
OK
 
2018.06.02

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

17,301

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

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

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

上記の処理で無事問題解決と思っていたのですが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を書くのが面倒なので、movefunにまとめます。
意図した処理か?を確認して問題なしです!
無事納品が完了しました。

|・`ω・)

Contact