基本的には、
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は不思議がいっぱいですね。