ipad safari: désactiver le défilement et l’effet de rebond?

2011 answer: Pour une application web / html exécutée dans iOS Safari, vous voulez quelque chose comme

document.ontouchmove = function(event){ event.preventDefault(); } 

Pour iOS 5, vous pouvez prendre en compte les éléments suivants: document.ontouchmove et défilement sur iOS 5

Mise à jour de septembre 2014: Une approche plus approfondie peut être trouvée ici: https://github.com/luster-io/prevent-overscroll . Pour cela et pour toute une série de conseils utiles sur les applications Web, voir http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Mise à jour mars 2016: ce dernier lien n’est plus actif – voir https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html pour la version archivée à la place. Merci @falsarella pour l’avoir signalé.

Vous pouvez également changer la position du corps / html à fixe:

 body, html { position: fixed; } 

Pour empêcher le défilement sur les navigateurs mobiles modernes, vous devez append le passif: false. J’avais arraché mes cheveux pour que cela fonctionne jusqu’à ce que je trouve cette solution. Je n’ai trouvé que cela mentionné dans un autre endroit sur Internet.

 function preventDefault(e){ e.preventDefault(); } function disableScroll(){ document.body.addEventListener('touchmove', preventDefault, { passive: false }); } function enableScroll(){ document.body.removeEventListener('touchmove', preventDefault, { passive: false }); } 

Pour ce faire, vous pouvez utiliser cet extrait de code jQuery:

 $(document).bind( 'touchmove', function(e) { e.preventDefault(); } ); 

Cela bloquera le défilement vertical ainsi que tout effet de rebond sur vos pages.

Je sais que c’est légèrement hors-piste mais j’ai utilisé Swiffy pour convertir Flash en un jeu interactif HTML5 et j’ai rencontré le même problème de défilement, mais je n’ai trouvé aucune solution efficace.

Le problème que j’avais était que l’étape Swiffy prenait tout l’écran, et dès qu’elle était chargée, l’événement Touchmove de document n’était jamais déclenché.

Si j’ai essayé d’append le même événement au conteneur Swiffy, celui-ci a été remplacé dès que l’étape s’est chargée.

À la fin, je l’ai résolu (plutôt compliqué) en appliquant l’événement Touchmove à chaque DIV de la scène. Comme ces divisions étaient également en constante évolution, je devais continuer à les vérifier.

C’était ma solution, qui semble bien fonctionner. J’espère que c’est utile pour quiconque essayant de trouver la même solution que moi.

 var divInterval = setInterval(updateDivs,50); function updateDivs(){ $("#swiffycontainer > div").bind( 'touchmove', function(e) { e.preventDefault(); } );} 

 overflow: scroll; -webkit-overflow-scrolling: touch; 

Sur conteneur, vous pouvez définir l’effet de rebond à l’intérieur de l’élément

Source: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Essayez cette solution JS :

 var xStart, yStart = 0; document.addEventListener('touchstart', function(e) { xStart = e.touches[0].screenX; yStart = e.touches[0].screenY; }); document.addEventListener('touchmove', function(e) { var xMovement = Math.abs(e.touches[0].screenX - xStart); var yMovement = Math.abs(e.touches[0].screenY - yStart); if((yMovement * 3) > xMovement) { e.preventDefault(); } }); 

Empêche le défilement et le rebond de Safari par défaut sans détacher les écouteurs d’événement tactile.

Testé dans l’iphone. Il suffit d’utiliser ce css sur le conteneur de l’élément cible pour modifier le comportement de défilement, qui s’arrête lorsque le doigt quitte l’écran.

 -webkit-overflow-scrolling: auto 

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

aucune des solutions ne fonctionne pour moi. C’est comme ça que je le fais.

  html,body { position: fixed; overflow: hidden; } .the_element_that_you_want_to_have_scrolling{ -webkit-overflow-scrolling: touch; } 

Pour ceux qui utilisent MyScript Web App et qui ont du mal à faire défiler / glisser (sur iPad et tablettes) plutôt que d’écrire:

Cela a réglé pour moi.

Vous pouvez utiliser js pour empêcher le défilement:

 let body = document.body; let hideScroll = function(e) { e.preventDefault(); }; function toggleScroll (bool) { if (bool === true) { body.addEventListener("touchmove", hideScroll); } else { body.removeEventListener("touchmove", hideScroll); } } 

Et que simplement exécuter / stop toggleScroll func quand vous ouvrez / fermez modal.

Comme ça toggleScroll(true) / toggleScroll(false)

(Ceci est uniquement pour iOS, sur Android ne fonctionne pas)

Semblable au kiwi en colère, je l’ai fait travailler en utilisant la hauteur plutôt que la position:

 html,body { height: 100%; overflow: hidden; } .the_element_that_you_want_to_have_scrolling{ -webkit-overflow-scrolling: touch; }