iOS Safari - Comment désactiver l'overscroll mais permettre aux divs défilants de défiler normalement ?

Question

Je travaille sur une application web basée sur l'iPad, et j'ai besoin d'empêcher le défilement excessif pour que cela ressemble moins à une page web. J'utilise actuellement cette fonction pour figer la fenêtre et désactiver le défilement :

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

Cela fonctionne très bien pour désactiver le défilement, mais mon application comporte plusieurs divs défilables. le code ci-dessus les empêche de défiler .

Je ne vise que l'iOS 5 et les versions supérieures et j'ai donc évité les solutions de fortune comme iScroll. À la place, j'utilise ce CSS pour mes divs défilants :

.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
}

Cela fonctionne sans le document overscroll script, mais ne résout pas le problème du défilement des div.

Sans plugin jQuery, Existe-t-il un moyen d'utiliser le correctif pour l'overscroll mais sans mes divs $('.scrollable') ?

EDIT :

J'ai trouvé quelque chose qui est une solution décente :

 // Disable overscroll / viewport moving on everything but scrollable divs
 $('body').on('touchmove', function (e) {
         if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
 });

La fenêtre d'affichage se déplace toujours lorsque vous faites défiler le début ou la fin de la division. J'aimerais trouver un moyen de désactiver cela également.

Answer 1

Cela résout le problème lorsque vous faites défiler le début ou la fin de la div.

var selScrollable = '.scrollable';
// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
// Uses body because jQuery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', selScrollable, function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
// Stops preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', selScrollable, function(e) {
  e.stopPropagation();
});

Notez que cela ne fonctionnera pas si vous voulez bloquer le défilement de la page entière lorsqu'une div n'a pas de débordement. Pour bloquer cela, utilisez le gestionnaire d'événement suivant au lieu de celui qui se trouve juste au-dessus (adapté de cette question ) :

$('body').on('touchmove', selScrollable, function(e) {
    // Only block default if internal div contents are large enough to scroll
    // Warning: scrollHeight support is not universal. (https://stackoverflow.com/a/15033226/40352)
    if($(this)[0].scrollHeight > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

Answer 2

En utilisant l'excellente méthode de Tyler Dodge réponse continuait à traîner sur mon iPad, alors j'ai ajouté un code d'accélération, maintenant c'est assez fluide. Il y a parfois quelques sauts minimes lors du défilement.

// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});

var scrolling = false;

// Uses body because jquery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {

    // Only execute the below code once at a time
    if (!scrolling) {
        scrolling = true;   
        if (e.currentTarget.scrollTop === 0) {
          e.currentTarget.scrollTop = 1;
        } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
          e.currentTarget.scrollTop -= 1;
        }
        scrolling = false;
    }
});

// Prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
  e.stopPropagation();
});

En outre, l'ajout de la feuille de style en cascade suivante corrige certains problèmes de rendu ( source ) :

.scrollable {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.scrollable * {
    -webkit-transform: translate3d(0,0,0);
}

Answer 3

Tout d'abord, empêchez les actions par défaut sur l'ensemble de votre document comme d'habitude :

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

Ensuite, empêchez votre classe d'éléments de se propager au niveau du document. Cela l'empêche d'atteindre la fonction ci-dessus et ainsi e.preventDefault() n'est pas lancé :

$('.scrollable').bind('touchmove', function(e){
  e.stopPropagation();
});

Ce système semble plus naturel et moins intensif que le calcul de la classe sur tous les mouvements de touche. Utilisez .on() plutôt que .bind() pour les éléments générés dynamiquement.

Tenez également compte de ces métabalises pour éviter que des choses malheureuses ne se produisent lors de l'utilisation de votre division déroulante :

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

Answer 4

Pouvez-vous ajouter un peu plus de logique dans votre code de désactivation de l'overscroll pour vous assurer que l'élément ciblé en question n'est pas un élément que vous souhaitez faire défiler ? Quelque chose comme ceci :

document.body.addEventListener('touchmove',function(e){
     if(!$(e.target).hasClass("scrollable")) {
       e.preventDefault();
     }
 });

Answer 5

Vérifie si l'élément défilable est déjà défilé vers le haut lorsqu'on essaie de le faire défiler vers le haut ou vers le bas lorsqu'on essaie de le faire défiler vers le bas, puis empêche l'action par défaut d'arrêter le déplacement de la page entière.

var touchStartEvent;
$('.scrollable').on({
    touchstart: function(e) {
        touchStartEvent = e;
    },
    touchmove: function(e) {
        if ((e.originalEvent.pageY > touchStartEvent.originalEvent.pageY && this.scrollTop == 0) ||
            (e.originalEvent.pageY < touchStartEvent.originalEvent.pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight))
            e.preventDefault();
    }
});