Блог

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

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

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

Обновление # 2: теперь у меня еще одна странная проблема. По какой-то странной причине поведение прокрутки при переполнении иногда путается, когда вам приходится перетаскивать палец влево и вправо по содержащему элементу, чтобы заставить его содержимое перемещаться вверх и вниз. Я еще не смог понять, почему это происходит — у кого-нибудь есть идеи?

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

 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.stopimmediateprop, поэтому вам не нужен EventListener для элемента document, но это нарушает zepto.js tap в моем случае:

 this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});
  

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

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

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

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