Mobile Safariでページスクロールを抑制する方法

モバイルのウェブアプリを作成する時には、画面サイズをデバイスに合わせて設計して、一般のウェブサイトを見る時には便利なページスクロールは抑制した方が扱いやすいアプリになります。
抑制する方法には以下の方法がよく知られていています。

document.ontouchmove = function () { event.preventDefault(); }

これだけだとTEXTAREA要素とかの二本指スクロールも抑制されてしまい、場合によっては困ることがあります。

そんな時には、スクロールさせたい要素にscrollなどクラス名をつけて、以下のコードを挿入しましょう。

scrolls = document.getElementsByClassName();
for (i = 0; i < scrolls.length; i++) {
    scrolls[i].ontouchmove = function () {
        if (event.touches.lengh == 2) event.stopPropagation();
    }
}

二本指の時にはイベント伝搬が抑制されるので、documentのハンドラのpreventDefault()が実行されず、OSのデフォルト動作(期待しているのはスクロール動作)が行われます。二本指以外はイベントが伝搬してdocumentのハンドラでpreventDefault()によりページスクロール動作が抑制されます。

でもこれだと、ピンチ動作も二本指なので時々、スクロールではなくピンチ動作してしまうみたいです。
Mobile Safariは小さなスマートフォンでストレス少なく一般のウェブサイトが見られることを証明した革新的なアプリですが、作り込みの際には上記のようなジレンマを抱えており、ウェブアプリで本当にいいUXを実現しようと思うと、デフォルト動作をすべて抑制して作り込む必要がありそうです。