cgvector réponse n'a pas fonctionné pour moi, mais cela a fait:

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

Je ne partirais 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.

pris d'ici: désactiver le défilement dans une application web iPhone?

pour les générations futures:

pour empêcher le défilement mais garder le contextmenu, essayer

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

il empêche toujours beaucoup plus que certains pourraient le vouloir, 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 permet des éléments scrollables dans le corps non contrôlable et empêche la bande de caoutchouc, jetez un oeil à ma réponse ici:

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

essayez d'ajouter

html {
  overflow-x: hidden;
}

ainsi que

body {
  overflow-x: hidden;
}

je soupçonne la plupart de tout le monde veut vraiment désactiver zoom/scroll afin de mettre en place une expérience plus app-like; parce que les réponses semblent contenir des éléments de solutions à la fois pour le zoom et le défilement, mais personne n'a vraiment cloué l'un ou l'autre vers le bas.

Scrolling

pour répondre à OP, la seule chose que vous semblez avoir à 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; comme 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 étiquettes body et html comprennent ce qui suit:

html:
{
    overflow: hidden;
}

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

Zoom

cependant, défiler est une chose, mais vous voulez probablement désactiver zoom ainsi. Ce que vous faites avec la balise meta dans votre markup:

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

Tous ces facteurs réunis vous donner une application l'expérience, probablement un meilleur ajustement pour la toile.

(méfiez-vous des conseils de certains pour ajouter des attributs comme initial-scale et width à la balise meta si vous utilisez une toile, parce que les toiles échelle leur contenu, contrairement aux éléments de bloc, et vous finirez avec une toile laide, le plus souvent que non).

utilisez ceci dans le style

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

utilisez ceci dans l'étiquette de tête

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

ça marche pour moi:

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

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

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

dans l'en-tête de la page, Ajouter

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

dans la feuille de style, ajouter

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

C'est à la fois html et le corps!

cela empêche le défilement sur les appareils mobiles, mais pas le simple clic/robinet.

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

les travaux suivants pour moi, bien que je n'ai pas testé chaque appareil Il ya à tester :-)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
    scrollTop:0
}, 0);