Désactiver IOS Safari Élastique de Défilement

Je suis en train d'écrire une application web en HTML et JavaScript pour utiliser sur un iPhone. Ce que je voudrais, c'est de prévenir l'application à partir de l'élastique scrolling (défilement au-delà de la pages d'extensions et de rebondir). Cependant, j'ai besoin de plus d'éléments de mon application pour être en mesure de faire défiler (l'application a une longue toile).

J'ai essayé de nombreuses réponses à cette trouvés ailleurs sur internet, cependant, l'ensemble de ces solutions soit utilisé JQuery, désactivé le défilement au total, utilisé Phonegap ou tout simplement ne fonctionne pas sur IOS 7. Comment puis-je faire cela?

voir cette réponse stackoverflow.com/a/16898264/112731
double possible de Comment faire pour désactiver la bande de caoutchouc dans iOS applications web?
La solution donnée sur cette question ne fonctionne plus. Vous avez de l'expérience vacille dans les limites supérieure et inférieure.

OriginalL'auteur Phedg1 | 2014-05-26

21

Il y a un moyen d'atteindre cet objectif sans jQuery:
```
document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});
```
Mais ce n'est pas une bonne solution. Il est préférable d'envelopper votre contenu dans certains div, et utiliser la propriété css:
```
 -webkit-overflow-scrolling: touch;
```
Ici est l'exemple

Edit:

Cela ne fera qu'empêcher overscroll dans webview, pas dans l'app. Si vous avez besoin de désactiver cette fonctionnalité dans l'application de config.
Si vous utilisez phonegap:
```
<preference name="DisallowOverscroll" value="true" />
```
Plus description ici

Si vous n'utilisez pas phonegap, vous pouvez utiliser cette.

Cela évite de défilement. Je veux être capable de faire défiler, mais je ne veux pas la page pour aller au-delà de ses extrémités.
Donc, permettent de faire défiler, mais ne pas faire ce lien
stackoverflow.com/questions/17550704/... peut-être être utile
C'est seulement pour ceux qui utilisent PhoneGap
Si vous n'utilisez pas phonegap, vous pouvez utiliser davidjhinson.wordpress.com/2010/11/13/...

OriginalL'auteur Umidbek Karimov

La solution ci-dessus est insuffisante à mon cas. Elle interdit toute défilement. Il est possible de construire une solution qui empêche l'élastique de défilement dans iOS, mais qui permet encore de défilement sur les enfants. J'ai pris la la solution ci-dessus et ajouter un chèque que les bulles du DOM pour déterminer quel élément déroulant "propriétaire" de l'événement scroll, et si c'est l'élément racine de la page, je le laisse tomber:

function overflowIsHidden(node) {
  var style = getComputedStyle(node);
  return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}

function findNearestScrollableParent(firstNode) {
  var node = firstNode;
  var scrollable = null;
  while(!scrollable && node) {
    if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
      if (!overflowIsHidden(node)) {
        scrollable = node;
      }
    }
    node = node.parentNode;
  }
  return scrollable;
}

document.addEventListener('DOMContentLoaded', function() {

    document.body.addEventListener('touchmove', function(event) {
      var owner = findNearestScrollableParent(event.target);
      if (!owner || owner === document.documentElement || owner === document.body) {
        event.preventDefault();
      }
    });

}, false);

À ce stade, le corps n'est plus à défilement ou élastiquement défilant dans iOS, mais les enfants sont des éléments de. Vous pouvez ensuite ajouter -webkit-overflow-scrolling: touch; pour les enfants de sorte qu'ils sont élastiques, mais le document ne sera pas. Cela permettra en fait de capturer tous les événements de défilement, même pendant que vous faites défiler vers le bas de la enfants, de sorte que la fenêtre de la position de défilement de l'habitude de changer de façon erronée. Sinon, vous pouvez également envisager de:

['resize', 'orientationchange', 'scroll'].forEach(function(event) {
  window.addEventListener(event, function() {
    window.scrollTo(0, 0);
  });
});

qui, en plus du premier bloc de code, j'ai partagé, faut vraiment jeter la hache au document de défilement dans ios tout à fait.

OriginalL'auteur Macmee

Vous devez vous connecter pour publier un commentaire.