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

Je travaille sur une application basée sur un navigateur, actuellement je développe et stylise pour le navigateur iPad Safari.

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

Cette réponse n'est plus applicable, sauf si vous développez pour un très ancien appareil iOS ... Veuillez voir d'autres solutions

Réponse de 2011: 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 voudrez peut-être 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 de nombreux conseils utiles sur les applications Web, consultez http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Mise à jour de 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 modifier la position du corps / html en fixe:

body,
html {
  position: fixed;
}

Pour éviter le défilement sur les navigateurs mobiles modernes, vous devez ajouter le passif: false. J'avais arraché mes cheveux pour que cela fonctionne 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);
}

Vous pouvez utiliser cet extrait de code jQuery pour ce faire:

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

Cela bloquera le défilement vertical et tout effet de rebond se produisant sur vos pages.

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

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

Je sais que c'est un peu hors piste, mais j'utilise Swiffy pour convertir Flash en un jeu HTML5 interactif et j'ai rencontré le même problème de défilement, mais je n'ai trouvé aucune solution qui fonctionnait.

Le problème que j'avais était que la scène Swiffy occupait tout l'écran, donc dès qu'il était chargé, l'événement touchmove du document n'était jamais déclenché.

Si j'essayais d'ajouter le même événement au conteneur Swiffy, il était remplacé dès que la scène était chargée.

En fin de compte, je l'ai résolu (plutôt désordonné) en appliquant l'événement touchmove à chaque DIV de la scène. Comme ces divs étaient également en constante évolution, je devais continuer à les vérifier.

C'était ma solution, qui semble bien fonctionner. J'espère que cela sera utile pour quiconque essaie de trouver la même solution que moi.

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

Code pour supprimer ipad safari: désactiver le défilement et l'effet de rebond

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

Si vous avez une balise canvas à l'intérieur du document, cela affectera parfois la convivialité de l'objet dans Canvas (exemple: mouvement de l'objet); alors ajoutez le code ci-dessous pour le réparer.

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

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

aucune des solutions ne fonctionne pour moi. Voilà comment je fais.

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

Testé sur iPhone. Utilisez simplement ce css sur le conteneur de l'élément cible et cela changera 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

Pour ceux qui utilisent MyScript l'application Web et ont du mal à faire défiler / glisser le corps (sur iPad et tablettes) au lieu d'écrire:

<body touch-action="none" unresolved>

Cela a réglé le problème 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 de simplement exécuter / arrêter toggleScrollfunc lorsque vous ouvrez / fermez modal.

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

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

Essayez cette solution JS qui change de webkitOverflowScrollingstyle. L'astuce ici est que ce style est désactivé, Safari mobile passe au défilement ordinaire et empêche le sur-rebond - hélas, il n'est pas capable d'annuler le glissement en cours. Cette solution complexe suit également onscrolllorsque le rebond sur le dessus rend le scrollTopnégatif qui peut être suivi. Cette solution a été testée sur iOS 12.1.1 et présente un seul inconvénient: lors de l'accélération du défilement, un sur-rebond unique se produit toujours, car la réinitialisation du style peut ne pas l'annuler immédiatement.

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

réponse améliorée @Ben Bos et commentée par @Tim

Ce css aidera à éviter les problèmes de défilement et de performances avec le rendu css car la position a changé / peu de retard sans largeur et hauteur

body,
html {
  position: fixed;
  width: 100%; 
  height: 100%
}

Pour ceux d'entre vous qui ne veulent pas se débarrasser du rebond mais simplement savoir quand il s'arrête (par exemple pour commencer un calcul des distances d'écran), vous pouvez faire ce qui suit (le conteneur est l'élément conteneur qui déborde):

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

Désactiver l'effet de défilement de rebond safari:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

Similaire au kiwi en colère, je l'ai fait 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;
}

Solution testée, fonctionne sur iOS 12.x

C'est le problème que je rencontrais:

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

Pendant que je fais défiler ma galerie, le corps défile toujours lui-même (le balayage humain n'est pas vraiment horizontal), cela rend ma galerie inutile.

Voici ce que j'ai fait pendant que ma galerie commence à défiler

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

Et quand ma galerie termine son défilement ...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

J'espère que cela aide ~