web-dev-qa-db-ja.com

すべてのモバイルデバイスでスクロールを無効にする

これはインターネット上で解決策があるはずのように聞こえますが、なぜ見つからないのかわかりません。モバイルデバイスで水平スクロールを無効にします。基本的にこれを達成しようとしています：

body{
   overflow-x:hidden  // disable horizontal scrolling.
}

これは関連情報である可能性があります：また、ユーザーがズームできるようにしたくないので、私はこれを私のヘッドタグにも持っています：

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

ありがとう

androidiphonecssmobilescroll
53
Sammy
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

相対的な位置は重要であり、私はそれについてつまずいた。それなしでは機能しませんでした。

101
zeek

cgvectorの答えは私にとってはうまくいきませんでしたが、これはうまくいきました：

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

スクロールを防ぐタイミングを選択するには、よりスマートなロジックが必要ですが、これは良い出発点です。

ここから： iPhone Webアプリケーションでスクロールを無効にしますか？

23
Chango

将来の世代の場合：

スクロールを防ぎながらコンテキストメニューを保持するには、試してください

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

それでも一部の人が好むかもしれない方法を防ぐことができますが、ほとんどのブラウザでは、防止されるデフォルトの動作はスクロールのみです。

スクロールできない本体内のスクロール可能な要素を許可し、ラバーバンドを防ぐより洗練されたソリューションについては、ここで私の答えを見てください：

https://stackoverflow.com/a/20250111/1431156

19
Tobl

追加してみてください

html {
  overflow-x: hidden;
}

と同様

body {
  overflow-x: hidden;
}
12
James Duffy

私は、ほとんどの人が本当にアプリのような体験をまとめるためにズーム/スクロールを無効にしたいと思うと思います。答えにはズームとスクロールの両方の解決策の要素が含まれているように見えますが、どちらも実際には解決されていません。

スクロール

OPに答えるために、スクロールを無効にするために必要と思われる唯一のことは、ウィンドウのscrollおよびtouchmoveイベントをインターセプトし、それらが生成するイベントでpreventDefaultおよびstopPropagationを呼び出すことです;そのようです

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

また、スタイルシートで、bodyおよびhtmlタグに次のものが含まれていることを確認してください。

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

ズーミング

ただし、スクロールは1つのことですが、おそらくズームも無効にする必要があります。マークアップでメタタグを使用してこれを行います。

<meta name="viewport" content="user-scalable=no" />

これらすべてを組み合わせることで、おそらくキャンバスに最適なアプリのような体験ができます。

（キャンバスを使用している場合は、initial-scaleやwidthなどの属性をメタタグに追加するようにアドバイスしてください。キャンバスとはscaleブロックとは異なり、要素、そしてあなたはcanvasいキャンバスで終わるでしょう、多くの場合。

10
Knetic

これをスタイリッシュに使う

body
{
overflow:hidden;
width:100%;
}

これをheadタグで使用します

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="Apple-mobile-web-app-capable" content="yes" />
4
cgvector

ページヘッダーに追加

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-sacle=1, maximum-scale=1, user-scalable=no">

ページスタイルシートで、追加

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

Htmlとbodyの両方です！

2
Downhillski

これは私のために働く：

window.addEventListener("touchstart", function(event){
             if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
                     event.preventDefault();
             }
} ,false);

100％動作しないので、これも追加しました：

window.addEventListener("scroll",function(){
    window.scrollTo(0,0)
},false)
1
bernard

CSSプロパティtouch-actionは探しているものを取得するかもしれませんが、 動作しないかもしれません すべてのターゲットブラウザで。

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}
0
sirbrialliance