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

Question

Je n'arrive pas à capturer l'événement de défilement sur un iPad. Aucun de ces travaux, ce que je fais mal?

 window.onscroll=myFunction;

document.onscroll=myFunction;

window.attachEvent("scroll",myFunction,false);

document.attachEvent("scroll",myFunction,false);
 

Ils fonctionnent tous même sur Safari 3 sous Windows. Ironiquement, CHAQUE navigateur sur le PC prend en charge window.onload= si le fait de ne pas déranger les événements existants ne vous dérange pas. Mais non, allez sur iPad.

Answer 1

L'iPhoneOS ne capture onscroll événements, à l'exception pas la façon dont vous pouvez vous attendre.

Un recadrage au doigt ne génère pas d'événements jusqu'à ce que l'utilisateur arrête le panoramique- onscroll événement est généré lorsque la page de cesse de se déplacer et redessine-comme indiqué dans la Figure 6-1.

De même, faites défiler avec 2 doigts incendies onscroll seulement après que vous avez cessé de défiler.

La manière habituelle de l'installation du gestionnaire de travaux par exemple

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc 

(Voir aussi http://developer.apple.com/safari/library/documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html)

Answer 2

Pour iOS, vous devez utiliser l’événement touchmove ainsi que l’événement scroll comme ceci :

Answer 3

Désolé pour l'ajout d'une autre réponse à un vieux post, mais j'ai l'habitude de les obtenir un événement scroll 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 qui fonctionne pour moi. Seule chose qu'il ne veut pas faire est de donner à un événement scroll pour la décélération du défilement (une Fois que la décélération est terminé, vous obtenez un dernier événement scroll, faites ce que vous allez avec elle.) mais si vous désactivez l'inertie avec css en faisant cela

-webkit-overflow-scrolling: none;

Vous n'obtenez pas l'inertie à vos éléments, pour le corps mais vous pourriez avoir à faire le classique

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

Answer 4

J'ai été en mesure d'obtenir une excellente solution à ce problème avec iScroll, avec la sensation de défilement dynamique et tout et tout https://github.com/cubiq/iscroll Le github doc est super, et j'ai surtout suivi. Voici les détails de ma mise en œuvre.

HTML: J'ai enveloppé la zone déroulante de mon contenu dans certains divs qui iScroll pouvez utiliser:

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

CSS: J'ai utilisé la Modernizr classe pour "toucher" pour cibler mes changements de style uniquement pour les appareils tactiles (parce que je ne instancié iScroll sur la touche).

.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-probe.js à partir de la iScroll télécharger, et ensuite initialisé la barre de défilement, comme ci-dessous, où updatePosition est ma fonction qui réagit à la nouvelle position de défilement.

# 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 regarder le défilement de l'offset. Voici une fonction de prise 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}; 
}

La seule autre gotcha était parfois je perds une partie de ma page que j'essayais de faire défiler, et il refusera de les faire défiler. J'ai dû ajouter dans certains appels à myScroller.refresh() à chaque fois que j'ai changé le contenu de la #wrapper, et qui a résolu le problème.

EDIT: un Autre piège est que iScroll mange tous les "cliquez sur" événements". J'ai activé l'option pour avoir iScroll émettent un "tap" de l'événement et traitées à la place de ", cliquez sur" événements". Heureusement je n'ai pas besoin de beaucoup d'cliquant dans la zone de défilement, ce n'était pas une grosse affaire.