подія прокрутки 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: Я загорнув область прокрутки свого вмісту в деякі диви, якими 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, і це вирішувало проблему.

EDIT: Інша проблема полягає в тому, що iScroll з'їдає всі події "натискання". Я ввімкнув опцію, щоб iScroll випромінював подію "tap" і обробляв їх замість подій "click". На щастя, мені не потрібно було багато клацати в області прокрутки, так що це було не багато.

Після виходу iOS 8 ця проблема вже не існує. Подія прокрутки тепер плавно запускається і в iOS Safari.

Отже, якщо ви зареєструєте scrollобробник подій і перевірте window.pageYOffsetвсередині цього обробника подій, все працює добре.