Blog

jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法

2015.06.03Cat:jQuery デザイナー

以前jQueryでプラグインを使わずにフリックを実装する方法についてご紹介いたしましたが、

こちらの方法を使った場合に、1つ問題が発生します。

それは、スマホやタブレットでは、

フリックできるようにした要素の上ではページのスクロールができなくなってしまうという問題です。

 

これは、touchmoveイベントの本来の動作であるページのスクロール動作を、

「e.preventDefault()」を指定してキャンセルしているためです。

フリックで要素を動かす動作を自然に行うためには欠かせないことなのですが、

横いっぱいに広げたスライダーなどでは、これによってページのスクロールができない範囲が大きくなってしまうため、とても使い勝手の悪いものとなってしまいます。

 

今回は、この問題を解決する方法について考えてみましたので、

ご紹介いたします。

 

 

 

↓こちらがこの問題を解決したDEMOです(スマホやタブレットなどのタッチデバイスでのみ動きます)

DEMO

qr-nino-demo74

 

↓問題解決前のDEMO

DEMO

qr-nino-demo74_2

 

方法

今回の解決方法は、垂直方向から15度以内の方向にフリックした場合は、ページのスクロールを有効にして、

それ以上の角度の方向にフリックした場合はフリックを要素の移動を優先させて、ページのスクロールをキャンセルさせるというものです。

flick-scroll

では次に実装方法をご紹介いたします。

 

jQuery(JavaScript)全体

 

まず、以前ご紹介した方法では、「touchstart」のイベントのときに、タッチした場所の情報として横方向の座標であるXの値だけを取得していましたが、これに加えて、縦方向の座標であるYの座標も取得します。

 

次に、「touchmove」のイベントでも同様に、

移動先の座標として横方向のX座標に加えて、縦方向のY座標も取得します。

取得できたら「touchstart」で取得した値と「touchmove」で取得した座標を元に、

フリックの方向を計算します。

そして、フリックの方向が垂直方向から15度以上の場合は「e.preventDefault()」でページのスクロールをキャンセルし、15度以内の場合はページのスクロールができるようにします。

 

これでページのスクロールを邪魔せず、フリックによる操作が実装できました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ