Как предотвратить поведение по умолчанию события touchmove в iOS 5? - PullRequest
Новая
       35

Как предотвратить поведение по умолчанию события touchmove в iOS 5?

5 голосов
/ 13 октября 2011

У меня есть веб-приложение, которое включает в себя компонент, который пользователь может прокручивать пальцем вверх и вниз.Я использую метод события warnDefault, чтобы предотвратить поведение по умолчанию, при котором касание перемещает весь экран на устройствах iOS.

К сожалению, это больше не работает в iOS 5, которую я только что обновил до сегодняшнего утра.Я должен предположить, что это просто делается по-другому в iOS 5, но я еще не смог найти ресурс, который предоставляет инструкции.

Спасибо!

Обновление № 1: У меня нет 'Я не смог найти ответ на мой конкретный вопрос, но я смог немного откорректировать свой код, чтобы использовать стиль -webkit-overflow-scrolling (со значением «touch») и реализовать эффектную инерционную возможность прокрутки (гдесодержимое прокручивается быстрее в зависимости от скорости вашего удара и будет «подпрыгивать резинкой», если оно достигнет границ. Довольно круто выглядит ...

Обновление № 2: У меня есть еще одна странная проблема. Для некоторыхстранная причина, по которой поведение при прокрутке переполнения иногда смешивается, в результате чего вам приходится перетаскивать палец влево и вправо через содержащий элемент, чтобы его содержимое двигалось вверх и вниз. Мне еще предстоит выяснить, почему это происходит - кто-нибудьесть идеи ???

Ответы [ 2 ]

8 голосов
/ 15 июня 2012

Я нашел очень простое решение.Когда событие попадает в ваш элемент, который может прокручиваться, просто пометьте событие.В прослушивателе событий в документе просто проверьте, установлен ли флаг, и остановите событие, только если флаг не установлен: 

this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  // when you have containers that are srollable but 
  // doesn't have enough content to scroll sometimes:
  // event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});

$(document).on('touchmove', function(event){
    if (!event.comesFromScrollable){
      event.preventDefault();
    }
});

Вместо этого вы также можете использовать event.stopImmediatePropagation , так что вам не нужен eventListener для элемента документа, но это нарушает zepto.js tap в моем случае: 

this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});
6 голосов
/ 14 октября 2011

Во-первых, я могу убедиться, что e.preventDefault () отключает всю прокрутку в iOS 5, используя следующий код: 

document.ontouchmove = function(e){ e.preventDefault(); }

К сожалению, однако, это отключает прокрутку при переполнении: scroll divs. (Если у кого-то есть решение, которое оставляет включенным прокрутку внутреннего элемента, поделитесь.)

Что касается обновления # 2, я заметил странное поведение, когда прокручиваемый элемент вложен в другой прокручиваемый элемент (включая саму страницу). Иногда устройство колеблется, на каком элементе пользователь собирается прокрутить. В частности, я заметил эту проблему, используя положение: исправлено. Мое решение состояло в том, чтобы убедиться, что тело имеет высоту 100% и что прокручиваемые элементы используют положение: абсолютное, где это возможно.

...