Disable IOS Safari Elastic Scrolling

J'écris une application Web en HTML et JavaScript pour une utilisation sur un iPhone. Ce que j'aimerais obtenir, c'est empêcher l'application de faire défiler les élastiques (défiler les pages en haut et rebondir). Cependant, j'ai besoin de certains des éléments plus longs de mon application pour pouvoir être défilé (l'application dispose d'une longue toile).

J'ai essayé de nombreuses réponses à cela trouvé ailleurs sur Internet, mais toutes ces solutions utilisaient JQuery, défilé défilé, utilisé Phonegap ou tout simplement ne fonctionnait pas sur IOS 7. Comment puis-je faire cela?

Il existe un moyen d'y parvenir sans jQuery:

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

Mais ce n'est pas une solution appropriée. Il est préférable d'envelopper votre contenu dans certains div, et d'utiliser la propriété css sur celui-ci:

  -webkit-overflow-scrolling: touch; 

Voici l'exemple

Modifier:

Cela n'empêchera que le overscroll dans la visualisation web, pas dans l'application. Vous devez donc désactiver cette fonctionnalité dans la configuration de l'application. Si vous utilisez l' option phonegap :

 <preference name="DisallowOverscroll" value="true" /> 

Plus de description ici

Si vous n'utilisez pas la fonction phonegap , vous pouvez l'utiliser.

La solution ci-dessus était insuffisante dans mon cas. Il interdit tout défilement. Il est possible de construire une solution ici qui empêche le défilement élastique dans iOS, mais cela permet encore de faire défiler les enfants. J'ai pris la solution ci-dessus et j'ai ajouté une vérification qui fait exploser le DOM pour déterminer quel élément défilable "possède" l'événement de défilement, et si c'est l'élément racine de la page, je le dépose:

 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éfilable ou élastiquement défilable dans iOS, mais les éléments d'enfant sont. Vous pouvez ensuite ajouter -webkit-overflow-scrolling: touch; À ces enfants afin qu'ils soient élastiques, mais le document ne le sera pas. Cela va effectivement capturer tous les événements de défilement même lorsque vous faites défiler jusqu'au bas des enfants, de sorte que la position de défilement de la fenêtre ne changera jamais de manière erronée. Vous pourriez également envisager:

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

Qui, en plus du premier bloc de code que j'ai partagé, devrait vraiment jeter une hache dans le défilement de documents dans ios.