Изменения JavaScript DOM в touchmove задерживаются до тех пор, пока прокрутка не закончится на мобильном Safari

В мобильном сафари, в процессе обработки touchmove для элемента, я изменяю className этого элемента. К сожалению, визуальное изменение не происходит во время прокрутки пользователя или до самого конца инерциального прокрутки.

Что я могу сделать, чтобы визуально принять className?

Дополнительно: По-видимому, это не ограничивается изменениями className, но, похоже, какое-либо изменение в DOM, например innerHTML и style.

Ответы

Ответ 1

Это к сожалению. Safari iOS будет помещать в очередь все манипуляции с DOM до конца прокрутки или жеста. Эффективно DOM заморожен во время прокрутки.

Я думал, что смогу найти ссылку на эту страницу на странице разработчика Apple, но я могу найти эту ссылку только для jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

Обратите внимание, что iOS-устройства блокируют DOM-манипуляцию во время прокрутки, очереди их применять, когда свиток завершается. В настоящее время мы изучаем способы разрешения манипуляций DOM до начала прокрутки

Надеюсь, это поможет!

Ответ 2

Я действительно построил этот сайт, и да, чтобы обойти это ограничение, не прокручивать сайт, используя встроенные функции браузера, а подделывать его. JS слушает прокрутку событий на колесиках и клавиатуре и подгоняет свойство css top основного контейнера к собственному "scrollTop". Полоса прокрутки справа - это, конечно же, обычай JS. В этом случае он синхронизируется с тем же внутренним значением scrollTop.

Весь сайт - это всего лишь одна большая анимация, причем основной временной шкалой является ее позиция scrollTop, и все вспомогательные анимации запускаются в определенное время. JS не минимизирован, поэтому загляните в файл ScrollAnimator.js, все там.

Ответ 3

Просто измените положение на -webkit-sticky. Не устанавливайте верх, чтобы он выглядел как обычный элемент, но выполняет как фиксированный элемент. И вы можете быстро обновить свой стиль, кроме позиции.