J'utilise -webkit-overflow-scrolling:touch pour faire défiler un div avec overflow:scroll ; de manière fluide grâce aux événements tactiles d'iOS.
Il fonctionne parfaitement, sauf qu'il ne semble pas mettre à jour element.scrollTop ou element.scrollLeft pendant le défilement. Il ne met à jour element.scrollTop / déclenche un événement de défilement que lorsque l'élan s'épuise et qu'il s'arrête.
Quelqu'un connaît-il un moyen de connaître sa position de défilement actuelle et s'il y a un événement que je peux écouter ? Je me demande si cela ne peut pas être trouvé par le biais d'une propriété CSS3, peut-être ? Merci
L'exemple ci-dessous montre deux tentatives :
<!DOCTYPE html>
<body>
<div id="display_a">Scroll is: 0</div>
<div id="display_b">Scroll is: 0</div>
<div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
<div style="font-size:100px;width:1850px;">
a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
</div>
<script>
var e = document.getElementById("element");
var display_a = document.getElementById("display_a");
var display_b = document.getElementById("display_b");
e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;});
setInterval(function(){display_b.innerHTML = "Scroll is: " + e.scrollLeft;},100);
</script>
</body>
</html>\============ UPDATE ============
iOS 8 a corrigé ce comportement. Les événements de défilement sont désormais déclenchés pendant le défilement.
Notez que vous devrez maintenant gérer les valeurs de défilement négatives pendant le défilement de rebond.
