событие прокрутки javascript для iPhone / iPad?

для iOS вам нужно использовать touchmove событие, а также свиток событие вроде этого:

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
}

извините за добавление другого ответа на старый пост, но я обычно получаю событие прокрутки очень хорошо, используя этот код (он работает по крайней мере на 6.1)

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

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

и это работает для меня. Единственное, что он не делает, это дает событие прокрутки для замедления прокрутки (как только замедление завершено, вы получаете окончательное событие прокрутки, делайте с ним все, что хотите.) но если вы отключите инерцию с помощью css, сделав это

-webkit-overflow-scrolling: none;

вы не получаете инерцию на ваших элементах, для тела хотя вам, возможно, придется сделать классический

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

я смог получить отличное решение этой проблемы с iScroll, с ощущением прокрутки импульса и все такое https://github.com/cubiq/iscroll GitHub doc великолепен, и я в основном следовал ему. Вот подробности моей реализации.

HTML: Я обернул прокручиваемую область моего контента в некоторые divs, которые iScroll может использовать:

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

CSS: Я использовал класс Modernizr для "касания", чтобы настроить свой стиль изменения только для сенсорных устройств (потому что я только создал экземпляр iScroll on 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: Я включил iscroll-зонд.js из загрузки iScroll, а затем инициализировал скроллер, как показано ниже, где updatePosition-это моя функция, которая реагирует на новую позицию прокрутки.

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

вы должны использовать myScroller, чтобы получить текущую позицию сейчас, вместо того, чтобы смотреть на смещение прокрутки. Вот функция, взятая из http://markdalgleish.com/presentations/embracingtouch/ (супер полезная статья, но немного устарела сейчас)

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

единственный другой gotcha был иногда я терял часть моей страницы, которую я пытался прокрутить, и он отказывался прокручивать. Мне пришлось добавить несколько звонков в myScroller.обновить () всякий раз, когда я изменил содержимое #wrapper, и это решило проблему.

EDIT: еще одна ошибка заключалась в том, что iScroll съедает все события "щелчка". Я включил опцию, чтобы iScroll испускал событие " tap "и обрабатывал их вместо событий" click". К счастью, мне не нужно было много щелкать в области прокрутки, так что это не было большим делом.

Так как iOS 8 вышла, эта проблема больше не существует. Событие прокрутки теперь запускается плавно и в iOS Safari.

Итак, если вы зарегистрируете scroll обработчик событий и проверить window.pageYOffset внутри этого обработчика события, все работает просто отлично.