событие прокрутки javascript для iPhone / iPad? - PullRequest
Новая
       54

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

104 голосов
/ 19 мая 2010

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

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

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

Ответы [ 5 ]

139 голосов
/ 19 мая 2010

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)

102 голосов
/ 20 марта 2012

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

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
}
36 голосов
/ 19 июня 2013

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

-webkit-overflow-scrolling: none;

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

document.addEventListener('touchmove', function(e) {e.preventDefault();}, true);
6 голосов
/ 17 апреля 2014

Мне удалось получить отличное решение этой проблемы с 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 генерировал событие «tap», и обрабатывал их вместо событий «click». К счастью, мне не нужно было много щелкать в области прокрутки, так что это не имеет большого значения.

1 голос
/ 24 августа 2018

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

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

...