Javascript Scroll Event für iPhone / iPad?

Ich kann das Scroll-Ereignis scheinbar nicht auf einem iPad erfassen. Keine dieser Arbeiten, was mache ich falsch?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Sie alle funktionieren sogar unter Safari 3 unter Windows. Ironischerweise unterstützt JEDER Browser auf dem PC, window.onload=wenn es Ihnen nichts ausmacht, vorhandene Ereignisse zu überfrachten. Aber nicht auf das iPad gehen.

Das iPhoneOS erfasst onscrollEreignisse, außer nicht so, wie Sie es erwarten.

Das Ein-Finger-Schwenken generiert keine Ereignisse, bis der Benutzer das Schwenken beendet - ein onscrollEreignis wird generiert, wenn sich die Seite nicht mehr bewegt und neu zeichnet - wie in Abbildung 6-1 dargestellt.

In ähnlicher Weise wird onscrolldas Scrollen mit 2 Fingern erst ausgelöst , nachdem Sie das Scrollen beendet haben.

Die übliche Art der Installation des Handlers funktioniert z

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

(Siehe auch https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Für iOS müssen Sie das Touchmove- Ereignis sowie das Scroll- Ereignis wie folgt verwenden :

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
}

Es tut mir leid, dass ich einem alten Beitrag eine weitere Antwort hinzugefügt habe, aber normalerweise erhalte ich mit diesem Code sehr gut ein Bildlaufereignis (es funktioniert mindestens unter 6.1).

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

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

Und das funktioniert bei mir. Das einzige, was es nicht tut, ist ein Bildlaufereignis für die Verzögerung des Bildlaufs anzugeben (Sobald die Verzögerung abgeschlossen ist, erhalten Sie ein endgültiges Bildlaufereignis, machen Sie es wie Sie wollen.), Aber wenn Sie die Trägheit mit CSS auf diese Weise deaktivieren

-webkit-overflow-scrolling: none;

Sie bekommen keine Trägheit auf Ihre Elemente, für den Körper, obwohl Sie möglicherweise den Klassiker machen müssen

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

Ich konnte mit iScroll eine großartige Lösung für dieses Problem finden, mit dem Gefühl des Momentum-Scrollings und allem https://github.com/cubiq/iscroll Das Github-Dokument ist großartig und ich habe es größtenteils befolgt. Hier sind die Details meiner Implementierung.

HTML: Ich habe den scrollbaren Bereich meines Inhalts in einige Divs eingeschlossen, die iScroll verwenden kann:

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

CSS: Ich habe die Modernizr-Klasse für "touch" verwendet, um meine Stiländerungen nur auf Touch-Geräte auszurichten (da ich iScroll nur bei Berührung instanziiert habe).

.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: Ich habe iscroll-probe.js aus dem iScroll-Download aufgenommen und dann den Scroller wie folgt initialisiert, wobei updatePosition meine Funktion ist, die auf die neue Scrollposition reagiert.

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

Sie müssen myScroller verwenden, um die aktuelle Position zu ermitteln, anstatt den Bildlaufversatz zu betrachten. Hier ist eine Funktion von http://markdalgleish.com/presentations/embracingtouch/ (ein super hilfreicher Artikel, aber jetzt etwas veraltet).

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}; 
}

Das einzige andere Problem war, dass ich gelegentlich einen Teil meiner Seite verlor, zu der ich scrollen wollte, und sich weigerte, zu scrollen. Ich musste myScroller.refresh () immer dann aufrufen, wenn ich den Inhalt des #wrapper änderte, und das löste das Problem.

EDIT: Ein weiteres Problem war, dass iScroll alle "Klick" -Ereignisse isst. Ich habe die Option aktiviert, dass iScroll ein "Tap" -Ereignis ausgibt, und diese anstelle von "Click" -Ereignissen behandelt. Zum Glück musste ich nicht viel in den Bildlaufbereich klicken, also war das keine große Sache.

Seit dem Erscheinen von iOS 8 besteht dieses Problem nicht mehr. Das Scroll-Ereignis wird jetzt auch in iOS Safari reibungslos ausgelöst.

Wenn Sie also den scrollEreignishandler registrieren und window.pageYOffsetin diesen Ereignishandler einchecken , funktioniert alles einwandfrei.