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

Кажется, я не могу зафиксировать событие прокрутки на iPad. Ничего из этого не работает, что я делаю не так?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Все они работают даже в Safari 3 в Windows. По иронии судьбы, КАЖДЫЙ браузер на ПК поддерживает, window.onload=если вы не возражаете против уничтожения существующих событий. Но на iPad нет.

IPhoneOS захватывает onscrollсобытия, но не так, как вы могли ожидать.

Панорамирование одним пальцем не генерирует никаких событий, пока пользователь не прекратит панорамирование - onscrollсобытие генерируется, когда страница перестает двигаться и перерисовывается - как показано на рисунке 6-1.

Точно так же прокрутка двумя пальцами срабатывает onscrollтолько после того, как вы прекратили прокрутку.

Обычный способ установки обработчика работает, например

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

(См. Также https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Для 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 великолепен, и я в основном следил за ним. Вот подробности моей реализации.

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

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

CSS: я использовал класс Modernizr для «прикосновения», чтобы нацелить изменения моего стиля только на сенсорные устройства (потому что я создавал экземпляр iScroll только при касании).

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

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

РЕДАКТИРОВАТЬ: Еще одна проблема заключалась в том, что iScroll съедает все события щелчка. Я включил опцию, чтобы iScroll генерировал событие «касание» и обрабатывал его вместо событий «щелчок». К счастью, мне не нужно было много щелкать в области прокрутки, так что это не имело большого значения.

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

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