スマホで2本指スクロールする方法

Question

レスポンシブでWebサイトを構築しています。
overflow-y: auto; ※heightは310px
の領域を、
PCは、スクロールバーを出してスクロール、
スマホは、「1本指ではなく2本指で」スクロールさせたいと思っています。

2本指でスクロールさせたい理由は、通常の画面全体のスクロールをしているときに、途中で縦スクロールの領域のスクロールをはさんで、画面全体のスクロールがスムーズではないから、です。
しかし、このoverflow-y:autoの部分が、縦スクロールできないのも困るので、この部分に関して、昔のiOS4のころのように、2本指でスクロールさせたいのです。
2本指でスクロールすることを強制する方法はないのでしょうか？

よろしくお願いいたします。

Answer 1

javascriptを使って一部の領域だけスクロールイベントを無効化し、
マルチタッチでのスクロールをjavascriptを使って実装すれば良いと思います。

自分は下記のHammer.jsというライブラリを使うと楽に実装が可能かと思います。

http://hammerjs.github.io/

上記ライブラリのpanイベントのオプションでポインターの数を指定できるので、
こちらを使って実装することも可能かと思います。

http://hammerjs.github.io/recognizer-pan/

Comments

[morimasa]

ありがとうございます！これから試してみますが、欲しかったのは、これです。試験実装後、またご報告します。

Answer 2

別軸の提案になりますが、
縦スクロール領域を普通のコンテンツとして表示するか、
省略表示をするなどして領域を畳み込んで、ボタンを押すと開くようにする形のほうがいいかもしれません。

Answer 3

Jqueryを使用してタッチイベントを制御すれば良いと思います。(Javascriptでも)
GoogleMapも一本指でのスクロールを禁止するオプションがあります。

Comments

[morimasa]

ありがとうございます。
なるほど、タッチイベントで指の数を取得すればできそうですね。
具体的に例えば「クラス名を付与するだけで実現するようなライブラリ」はないのでしょうか？