web-dev-qa-db-fra.com

Désactiver le défilement sur tous les appareils mobiles

Cela ressemble à une solution sur Internet, mais je ne sais pas pourquoi je ne la trouve pas. Je souhaite désactiver le défilement horizontal sur les appareils mobiles. Essentiellement, pour y parvenir:

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

Cela peut être une information pertinente: j'ai aussi ceci dans mon tag tête, parce que je ne souhaite pas non plus que l'utilisateur puisse zoomer:

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

Merci

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

La position relative est importante et je suis tombé dessus à ce sujet. Ne pourrait pas le faire fonctionner sans elle.

101
zeek

cgvector answer n'a pas fonctionné pour moi, mais cela a fonctionné:

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

Je ne le laisserais pas comme ça, une logique plus intelligente est nécessaire pour choisir quand empêcher le défilement, mais c'est un bon début.

Tiré d'ici: Désactiver le défilement dans une application Web iPhone?

23
Chango

Pour les générations futures:

Pour empêcher le défilement tout en conservant le menu contextuel, essayez

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

Il en empêche toujours bien plus que d’autres, mais pour la plupart des navigateurs, le seul comportement par défaut empêché devrait être le défilement.

Pour une solution plus sophistiquée qui permette l’insertion d’éléments de défilement dans le corps non collable et évite l’élastique, jetez un œil à ma réponse ici:

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

19
Tobl

Essayez d'ajouter

html {
  overflow-x: hidden;
}

aussi bien que

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

Je pense que la plupart des gens veulent vraiment désactiver le zoom/défilement afin de créer une expérience plus proche de celle d'une application. parce que les réponses semblent contenir des éléments de solutions pour le zoom et le défilement, mais personne ne l'a vraiment cloué.

Défilement

Pour répondre à OP, la seule chose que vous semblez devoir faire pour désactiver le défilement est d’intercepter les événements scroll et touchmove de la fenêtre et d’appeler preventDefault et stopPropagation sur les événements qu'ils génèrent; ainsi

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

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

Et dans votre feuille de style, assurez-vous que vos balises body et html comprennent les éléments suivants:

html:
{
    overflow: hidden;
}

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

Zoomer

Toutefois, le défilement est une chose, mais vous souhaitez probablement également désactiver le zoom. Ce que vous faites avec la balise meta dans votre balisage:

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

Tous ces éléments réunis vous offrent une expérience similaire à celle d'une application, probablement la meilleure solution pour la toile.

(Méfiez-vous des conseils de certains pour ajouter des attributs tels que initial-scale et width à la balise meta si vous utilisez une toile, car les canevas scale leur contenu, contrairement aux éléments de bloc, et vous vous retrouverez avec une toile laide, plus souvent qu'autrement).

10
Knetic

utilisez ceci avec style

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

Utilisez ceci dans la balise principale

<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

Dans l'en-tête de page, ajoutez

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

Dans la feuille de style de la page, ajoutez

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

C'est à la fois HTML et corps!

2
Downhillski

Cela fonctionne pour moi:

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

Cela ne fonctionne pas à 100% et j'ai également ajouté ceci:

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

La propriété CSS touch-action peut vous donner ce que vous cherchez, bien que ce soit peut ne pas fonctionner dans tous vos navigateurs cibles.

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