iPhone、Androidでページスクロールを止める

基本的には、

JavaScript

document.addEventListener("touchmove", function(evt) {
    evt.preventDefault();
}, false);

という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。

が。

一部Androidではこの設定を乗り越えてページをスクロールしてこようとします。
どうしてもページのスクロールを止めたいときは、

HTML

<div id="stoper">
    <!--この中にコンテンツをつくる-->
</div>

CSS

html, body {
    height: 100%;
}

#stoper {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

という感じで全体をコンテンツ全体をoverflow: hiddenの要素で囲むほかないようです。

また、この際、

CSS

#stoper.on {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

#stoper {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: auto;
    overflow: visible;
}

という感じで#stoperのクラスでスクロールのON, OFFを切り替えようとしても一部機種でなぜかうまくいかず、

CSS

#stoper {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

#stoper.off {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: auto;
    overflow: visible;
}

という感じにしてみたらうまくいきました。まったくもって謎。Androidは不思議がいっぱいですね。