it-swarm.com.de

Deaktivieren Sie das Scrollen auf allen Mobilgeräten

Das klingt so, als ob es im Internet eine Lösung dafür geben sollte, aber ich bin mir nicht sicher, warum ich sie nicht finden kann. Ich möchte das horizontale Scrollen auf Mobilgeräten deaktivieren. Grundsätzlich versuchen, dies zu erreichen:

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

Dies kann eine relevante Information sein: Ich habe diese auch in meinem Kopf-Tag, da ich auch nicht möchte, dass der Benutzer zoomen kann:

<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" />

Vielen Dank

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

Die relative Position ist wichtig und ich bin nur darüber gestolpert. Könnte nicht funktionieren ohne es.

101
zeek

cgvector answer hat bei mir nicht funktioniert, aber das hat funktioniert:

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

Ich würde es nicht einfach so lassen, es ist eine intelligentere Logik erforderlich, um auszuwählen, wann das Scrollen verhindert werden soll, aber dies ist ein guter Anfang.

Entnommen von hier: Scrollen in einer iPhone-Webanwendung deaktivieren?

23
Chango

Für zukünftige Generationen:

Versuchen Sie, das Scrollen zu verhindern, aber das Kontextmenü beizubehalten

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

Es verhindert immer noch viel mehr, als manche mögen, aber für die meisten Browser sollte das einzige verhinderte Standardverhalten das Scrollen sein.

Für eine ausgefeiltere Lösung, die scrollbare Elemente innerhalb des nicht rollbaren Körpers zulässt und Gummibänder verhindert, sehen Sie sich meine Antwort hier an:

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

19
Tobl

Versuchen Sie das Hinzufügen

html {
  overflow-x: hidden;
}

ebenso gut wie

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

Ich vermute, dass die meisten wirklich das Zoomen/Scrollen deaktivieren möchten, um eine App-ähnliche Erfahrung zu erzielen. weil die Antworten Elemente von Lösungen sowohl für das Zoomen als auch für das Scrollen zu enthalten scheinen, aber niemand hat sie wirklich festgenagelt.

Scrollen

Um auf OP zu antworten, müssen Sie anscheinend nur die Ereignisse scroll und touchmove des Fensters abfangen und preventDefault und stopPropagation aufrufen die Ereignisse, die sie erzeugen; wie so

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

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

Stellen Sie in Ihrem Stylesheet sicher, dass Ihre Tags body und html Folgendes enthalten:

html:
{
    overflow: hidden;
}

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

Zoomen

Scrollen ist jedoch eine Sache, aber Sie möchten wahrscheinlich auch den Zoom deaktivieren. Was Sie mit dem Meta-Tag in Ihrem Markup machen:

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

Alle diese Elemente zusammen ergeben eine App-ähnliche Erfahrung, die wahrscheinlich am besten zur Leinwand passt.

(Seien Sie vorsichtig mit dem Rat einiger, Attribute wie initial-scale und width zum Meta-Tag, wenn Sie eine Leinwand verwenden, da Leinwände skalieren deren Inhalt im Gegensatz zu Blockelementen und Sie eine hässliche Leinwand erhalten, mehr oft als nicht).

10
Knetic

verwenden Sie dies mit Stil

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

Verwenden Sie dies in head tag

<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

Fügen Sie im Seitenkopf hinzu

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

Fügen Sie im Seiten-Stylesheet Folgendes hinzu

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

Es ist HTML und Körper!

2
Downhillski

Das funktioniert bei mir:

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

Es funktioniert nicht zu 100% und ich habe auch folgendes hinzugefügt:

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

Die CSS-Eigenschaft Touch-Action kann Ihnen helfen, wonach Sie suchen, obwohl es funktioniert möglicherweise nicht in allen Ihren Zielbrowsern.

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