[TIPS] iOS Safariをスクロールさせない方法

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

Swiffyランタイムが バージョン4.0にアップデートされました。(2012/3/20)
Release Notes – Google Swiffy

バージョン4.0では、Swiffyコンテンツの上からタッチしてブラウザをスクロールできるようになりました。
バージョン3.9以下ではブラウザのスクロールができませんでした。

これはバナー等のインラインで再生するコンテンツであれば問題ないのですが、
Swiffyを使ってWebアプリを作る場合、ページがスクロールせずにいて欲しい場合があると思います。
(例えば、コンテンツ内のオブジェクトをタッチでドラッグしようとした時に、一緒にブラウザが動いてしまう。等)

そんな場合は以下を記述すれば、ブラウザのスクロールができないようになります。

<script type="text/javascript">
 
document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("touchcancel", touchHandler, false);
 
function touchHandler(event) {
       event.preventDefault();
}
 
</script>

これでブラウザを固定できました。
以上小ネタでした。

One Comment

  1. xebix より:

    こんにちは。
    Swiffy内でドラッグ操作をしたいのですが…
    スクロールに邪魔されて困っています。

    iOS特有のバウンススクロール(…というんですかね?
    ドラッグでページの端までいっても少しスクロールし指を離すと戻るアレです
    ページが画面内に収まってても動作するアレ…)

    ドラッグすると、このバウンススクロールが作動してしまい
    コンテンツ内のドラッグ操作においてすごく邪魔になります。
    ここで紹介されてるコードを参考に…というかコピペさせて頂いたのですが、
    やはりバウンススクロールを無効にはできませんでした。

    バウンスを無効にする方法を、もしご存知でしたら教えてください。

Leave a Reply