BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

2018.06.02

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

15

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

一般的にパソコンでの動作の場合は、『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