Javascript Girl
  1. Javascript Girl
  3. IOS Safari onscroll événement dans l'élément imbriqué
Intereting Posts
Le meilleur script polyfil d'espace réservé pour ie7, ie8 et ie9 HTML5 glisser-déposer pour mobile Qu'est-ce qu'une «matrice» pour raphael Cliquez () ne fonctionne pas avec les liens Erreur de proxy de compression de données Chrome avec jquery ajax Modifier la valeur d'un type de données primitif enveloppé Comment obtenir le jour de la semaine et le mois de l'année? IE 10 – Impossible d'obtenir la propriété 'PageRequestManager' d'une référence non définie ou nulle: Obtention de valeur de la case à cocher HTML à partir des événements onclick / onchange Spécification du type de contenu dans Meteor (JavaScript) Comment consommer Http Component efficacement dans un service dans 2 bêta angulaire? Comment puis-je savoir quel bouton radio est sélectionné via jQuery? Dactylographe – objet de clonage Utilisez le plugin jQuery avec Backbone et Requirejs Utilisation de regex pour filtrer l'année de longueur fixe 0 ou 4 chiffres

IOS Safari onscroll événement dans l'élément imbriqué

Mon but ultime est d'avoir une div en ligne sur ma page qui défile horizontalement en mode natif (en utilisant -webkit-overflow-scrolling: touch ) qui se déclenche également.

Je peux le réaliser sans le -webkit-overflow-scrolling car j'ai accès à l'événement ontouchend , donc je peux calculer mon instantané lorsque cela se produit, cependant, pour obtenir le meilleur UX possible pour cette fonctionnalité, je veux utiliser le défilement natif Sur cet élément.

Le problème avec l'utilisation de -webkit-overflow-scrolling est que, à l'aide d'un flick / some force, le div continuera à défiler un peu après avoir retiré votre doigt (c.-à-d. Après ontouchend a déclenché) ; Ce qui signifie que mon instantané calcule avant que le défilement ne soit terminé.

Après avoir longtemps essayé de trouver des moyens, je n'ai pas encore réussi.

Dans le contexte de la page entière, safari déclenche l'événement onscroll lorsqu'un défilement est terminé . Ma question est, est-il possible de faire déclencher cet événement dans le contexte d'un élément ? C'est-à-dire avoir un feu d'artifice à l'intérieur <div id="slideShow"> ?

Sinon, est-il possible

(A) Vitesse d'accès d'un ontouchmove par exemple, donc je pourrais calculer quand exécuter le snap?

ou

(B) Emulate -webkit-overflow-scroll: touch (les effets d'élasticité et de vitesse).

REMARQUE: Par souci d'exemple, à l'aide de l'iPad w / iOS5.

L'événement de scroll est déclenché séparément sur chaque conteneur défilant, et sur iOS seulement après que le défilement s'est arrêté et qu'il est terminé. Vous pouvez simplement écouter l'événement de défilement sur votre conteneur.

Voici un exemple: 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test Touch Scrolling</title> <style> body { font-size: 15em; } #outer { height: 1200px; width: 300px; overflow-x: scroll; -webkit-overflow-scrolling: touch; } #inner { width: 600px; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var list = document.getElementById("outer"); list.addEventListener("scroll", function(event) { alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'"); }); }, false); </script> </head> <body> <div id="outer"> <div id="inner">Some text. And more.</div> </div> </body> </html>

Vous ne verrez l'alerte que lorsque vous avez parcouru le texte horizontalement, et non lorsque le div divisé a été déroulé.