2012/04/21更新

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

このエントリーをはてなブックマークに追加            

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

びよーんとスクロールする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に対応する場合には、追加対応が必要かもしれません。
最後までお読み頂きましてありがとうございました(・∀・)






こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。