[Web] スマートフォンのびよーんと伸びるスクロールの動きを止める方法

今日はライトなネタを(*´∇｀*)
スマートフォンでWebサイトを見た際に、指でスクロールすると、 画面外までびよーんとスクロールできます。iPhoneとか。 でも時には、その動作をして欲しくない事も。指で絵書くサイトとか。
そのびよーん動作を防ぐ方法をブログに残したいと思います。

びよーん動作を防ぐスクリプト

ひっぱって戻る動作を防ぐ為に、横スクロールの禁止と縦スクロールの禁止に分けて対応します。

横スクロールを禁止する

横スクロールを禁止する為には、metaタグでviewportの設定を行うとできるようです。

<meta name="viewport" content="width=500px ,initial-scale=0.64 ,user-scalable=no"/>

横幅指定と、初期表示倍率指定と、ユーザーによる倍率変更の禁止です。

縦スクロールを禁止する

びよーん動作を防ぐために、以下のタップイベントとジェスチャーイベントで、 イベントのデフォルト動作（スクロールする動き）を禁止します。

• touchstart
• touchmove
• touchend
• gesturestart
• gesturechange
• gestureend

iPhoneの仕様ですが、touchXXXは、指1本で触った時の動作、gestureXXXは、指2本以上で触った時の動作です。

縦スクロールを抑止するコードは以下となります。

// スクロールを抑止する関数
function preventScroll(event) {

  // li要素だけは、タップイベントに反応したいので、抑止しない。
  if (event.touches[0].target.tagName.toLowerCase() == "li") {return;}

  // preventDefaultでブラウザ標準動作を抑止する。
  event.preventDefault();
}

// タッチイベントの初期化
document.addEventListener("touchstart", preventScroll, false);
document.addEventListener("touchmove", preventScroll, false);
document.addEventListener("touchend", preventScroll, false); 
// ジェスチャーイベントの初期化
document.addEventListener("gesturestart", preventScroll, false);
document.addEventListener("gesturechange", preventScroll, false);
document.addEventListener("gestureend", preventScroll, false);

上記実装では、すべてのタップイベントに対して、デフォルト動作を禁止していますが、 一部「li」要素に対するタップイベントは、デフォルド動作を禁止しないようにしています。

最後に

今回のはiPhoneにフォーカスしての対応でした。 Androidに対応する場合には、追加対応が必要かもしれません。
最後までお読み頂きましてありがとうございました(・∀・)