JavaScript événement de défilement pour iPhone / iPad?

pour iOS vous devez utiliser l'événement touchmove ainsi que le scroll événement comme ceci:

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

Désolé d'ajouter une autre réponse à un vieux post mais je reçois habituellement un événement de défilement très bien en utilisant ce code (il fonctionne au moins sur 6.1)

element.addEventListener('scroll', function() {
    console.log(this.scrollTop);
});

// This is the magic, this gives me "live" scroll events
element.addEventListener('gesturechange', function() {});

et ça marche pour moi. La seule chose qu'il ne fait pas est de donner un événement de défilement pour la décélération du défilement (une fois la décélération est terminée, vous obtenez un événement de défilement final, faire comme vous le voulez avec elle.), mais si vous désactivez l'inertie avec css en faisant cela,

-webkit-overflow-scrolling: none;

Vous n'obtiendrez pas inertie sur vos éléments, pour le corps bien que vous pourriez avoir à faire le classique

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

j'ai pu obtenir une grande solution à ce problème avec iScroll, avec la sensation de défilement de l'impulsion et tout https://github.com/cubiq/iscroll the github doc is great, and I most followed it. Voici les détails de ma mise en œuvre.

HTML: J'ai enveloppé la zone scrollable de mon contenu dans quelques divs que iScroll peut utiliser:

<div id="wrapper">
  <div id="scroller">
    ... my scrollable content
  </div>
</div>

CSS: Je j'ai utilisé la classe Modernizr pour "touch" pour cibler mes modifications de style uniquement sur les appareils tactiles (parce que je n'ai instancié iScroll que sur touch).

.touch #wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.touch #scroller {
  position: absolute;
  z-index: 1;
  width: 100%;
}

JS: J'ai inclus iscroll-sonde.js du téléchargement d'iScroll, puis initialisé le scroller comme ci-dessous, où updatePosition est ma fonction qui réagit à la nouvelle position de scroll.

# coffeescript
if Modernizr.touch
  myScroller = new IScroll('#wrapper', probeType: 3)
  myScroller.on 'scroll', updatePosition
  myScroller.on 'scrollEnd', updatePosition

Vous devez utiliser myScroller pour obtenir la position actuelle maintenant, au lieu de en regardant l'offset du rouleau. Voici une fonction prises de http://markdalgleish.com/presentations/embracingtouch/ (un super article utile, mais un peu démodé maintenant)

function getScroll(elem, iscroll) {   
  var x, y;

  if (Modernizr.touch && iscroll) {
    x = iscroll.x * -1;
    y = iscroll.y * -1;   
  } else {
    x = elem.scrollTop;
    y = elem.scrollLeft;   
  }

  return {x: x, y: y}; 
}

le seul autre gotcha était de temps en temps je perdais une partie de ma page que j'essayais de faire défiler, et elle refusait de défiler. J'ai dû ajouter des appels à myScroller.refresh() chaque fois que j'ai changé le contenu du # wrapper, et cela a résolu le problème problème.

EDIT: un autre gotcha était que iScroll mange tous les événements "click". J'ai activé l'option pour que iScroll émette un événement "tap" et les gère au lieu des événements "click". Heureusement je n'ai pas besoin de beaucoup d'cliquant dans la zone de défilement, ce n'était pas une grosse affaire.

Depuis iOS 8 est sorti, ce problème n'existe plus. L'événement scroll est maintenant lancé en douceur dans iOS Safari aussi bien.

donc, si vous enregistrez le scroll event handler et cochez window.pageYOffset à l'intérieur de ce event handler, tout fonctionne très bien.