событие прокрутки 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= Если вы не против clobbering существующих событий. Но не на iPad.

98
ipad iphone javascript onscroll scroll

5 ответов

iPhoneOS захватывает onscroll событий, разве не так, как вы можете ожидать.

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

аналогично, прокрутка с 2 пальцами пожаров 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)

136

для 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
}
94

извините за добавление другого ответа на старый пост, но я обычно получаю событие прокрутки очень хорошо, используя этот код (он работает по крайней мере на 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);
36

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

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

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

CSS: Я использовал класс Modernizr для "touch", чтобы настроить свой стиль изменения только для сенсорных устройств (потому что я только создал экземпляр 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-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}; 
}

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

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

6

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

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

0