2018年10月10日

bx-sliderをスマホで実装したらスライダーの上で上下にスワイプ出来なくて、画面をスクロール出来ない問題の解決法

jQueryでスライダーを実装するためのプラグインといえば、「slick」をはじめ多くのプラグインがありますが、ひと昔前はスライダーといえば「bx-slider」だったと言っても過言ではないと思います。もちろん2018年現在でも十分現役の「bx-slider」ですが、たまに融通がきかない事態に陥ることがあります。

スマホで画面スクロールが出来ない

スライダーを実装しているのでスライダー自体は横にスクロール出来るのですが、そのスライダーの上で上下に画面スクロールさせようとしても動いてくれない、という事態に陥ったのです。「preventDefaultSwipeX」と「preventDefaultSwipeY」で制御できるものかと思いきや、スワイプは出来てもスクロールが出来ないなど、思ったような挙動にならず。

とはいえどこかで制御していることは確かなので、オプションでダメならライブラリ自体をイジってしまおう、という事でいろいろ試してみたところ、一ヶ所コメントアウトするだけでOKでした。

※bxSlider v4.2.1dの例

【該当箇所】

~中略~
Z=function(b){if("touchstart"===b.type||0===b.button)if(b.preventDefault(),
~中略~

【コメントアウト後】

~中略~
Z=function(b){if("touchstart"===b.type||0===b.button)if(/*b.preventDefault(),*/
~中略~

以上、bx-sliderをスマホで実装したらスライダーの上で上下にスワイプ出来なくて、画面をスクロール出来ない問題の解決法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です