iPad safari: désactiver le défilement, et l'effet rebond?

Question

iPad safari: désactiver le défilement, et l'effet rebond?

je travaille sur une application basée sur le navigateur, actuellement je développe et le style pour le navigateur safari ipad.

je cherche deux choses sur l'ipad: comment désactiver le défilement vertical pour les pages qui n'en ont pas besoin? & Comment puis-je désactiver l'effet rebond élastique?

97

bounce ipad mobile-safari scroll

demandé sur Whitewall 2011-10-14 17:23:04

12 réponses

score 150 · Answer 1

2011 réponse: pour une application web / html fonctionnant dans iOS Safari vous voulez quelque chose comme

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

pour iOS 5 vous pouvez prendre en compte le document suivant: .ontouchmove et scrolling on iOS 5

Mise À Jour Septembre 2014: Une approche plus complète peut être trouvée ici: https://github.com/luster-io/prevent-overscroll . Pour cela et tout un tas de conseils webapp utiles, 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 de le souligner.

score 82 · Answer 2

vous pouvez aussi changer la position du corps/html en fixe:

body,
html {
  position: fixed;
}

score 14 · Answer 3

pour éviter le défilement sur les navigateurs mobiles modernes, vous devez ajouter le passif: false. Je me suis arraché les cheveux pour faire marcher ça jusqu'à ce que je trouve cette solution. Je n'ai trouvé cela mentionné qu'à 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 });
}

score 6 · Answer 4

vous pouvez utiliser ce code jQuery snippet pour faire ceci:

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

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

score 4 · Answer 5

je sais que c'est légèrement hors-piste, mais J'ai utilisé Swiffy pour convertir Flash en un jeu interactif HTML5 et suis tombé sur le même problème de défilement, mais n'a trouvé aucune solution qui a fonctionné.

le problème que j'avais était que L'étape Swiffy prenait l'écran entier, donc dès qu'il était chargé, l'événement touchmove de document n'a jamais été déclenché.

si j'ai essayé d'ajouter le même événement au conteneur Swiffy, il a été remplacé dès que le la scène avait chargé.

à la fin je l'ai résolu (assez messieusement) en appliquant l'événement touchmove à chaque DIV dans l'étape. Comme ces divs étaient également en constante évolution, j'ai dû continuer à les vérifier.

C'est 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();
    }
);}

score 3 · Answer 6

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

Sur le récipient, vous pouvez définir 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 /

score 2 · Answer 7

Essayez cette JS sollutuion :

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 Safari par défaut et les gestes de rebond sans détacher vos écouteurs d'événements tactiles.

score 2 · Answer 8

aucune des solutions ne fonctionne pour moi. C'est de cette façon que je le fais.

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

score 2 · Answer 9

testé sur iphone. Il suffit d'utiliser ce conteneur css sur élément cible et il va changer le comportement de défilement, qui s'arrête lorsque doigt sort de l'écran.

-webkit-overflow-scrolling: auto

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

score 1 · Answer 10

pour ceux qui utilisent MyScript L'application Web et se battent avec le corps défilant / glissant (sur iPad et tablettes) au lieu de réellement écrire:

<body touch-action="none" unresolved>

qui l'a réparé pour moi.

score 0 · Answer 11

vous pouvez utiliser JS pour prevent scroll:

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 juste courir / arrêter toggleScroll func lorsque vous opnen / fermer modal.

comme ceci toggleScroll(true) / toggleScroll(false)

(ce n'est que pour iOS, sur Android ne fonctionne pas)

score -1 · Answer 12

similaire à angry kiwi j'ai réussi à le faire fonctionner 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;
}

Las etiquetas más populares

iPad safari: désactiver le défilement, et l'effet rebond?

12 réponses