javascript scroll event dla iPhone/iPad?

Dla systemu iOS należy użyć zdarzenia touchmove oraz zdarzenia scroll w następujący sposób:

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
}

Przepraszam za dodanie kolejnej odpowiedzi do starego posta, ale zwykle bardzo dobrze dostaję Zdarzenie scroll używając tego kodu (działa co najmniej na 6.1)

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

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

-webkit-overflow-scrolling: none;

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

Udało mi się uzyskać świetne rozwiązanie tego problemu z iscrollem, z poczuciem przewijania pędu i wszystkim https://github.com/cubiq/iscroll github doc jest świetny, i głównie go śledziłem. Oto szczegóły mojej realizacji.

HTML: I owinął przewijalny obszar mojej zawartości w niektórych divów, które iScroll może użyć:

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

CSS: Używałem klasy Modernizr dla "touch", aby kierować moje zmiany stylu tylko do urządzeń dotykowych (bo I tylko instanted iScroll na dotyku).

.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: Włączyłem iscroll-probe.js z iscroll Pobierz, a następnie zainicjował scroller jak poniżej, gdzie updatePosition jest moją funkcją, która reaguje na nową pozycję przewijania.

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

Musisz użyć myScroller, aby uzyskać bieżącą pozycję, zamiast patrzeć na przesunięcie przewijania. Oto funkcja zaczerpnięta z http://markdalgleish.com/presentations/embracingtouch / (bardzo pomocny artykuł, ale teraz trochę nieaktualne)

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

Jedyną inną gotcha było to, że czasami traciłem część mojej strony, którą próbowałem przewijać, a ona odmawiała przewijania. Musiałem dodać kilka połączeń do myScroller.refresh() za każdym razem, gdy zmieniałem zawartość # wrappera i to rozwiązywało problem.

EDIT: Kolejną zaletą było to, że iScroll zjada wszystkie zdarzenia "klikania". Włączyłem opcję, aby iScroll emitował Zdarzenie " tap "i obsługiwał je zamiast zdarzeń "click". Na Szczęście Ja nie trzeba było dużo klikania w obszarze przewijania, więc nie było to nic wielkiego.

Odkąd pojawił się iOS 8, ten problem już nie istnieje. Zdarzenie przewijania jest teraz uruchamiane płynnie również w przeglądarce iOS Safari.

Więc, jeśli zarejestrujesz scroll obsługę zdarzeń i sprawdzisz window.pageYOffset wewnątrz tej obsługi zdarzeń, wszystko działa dobrze.