Вопрос по ios, javascript – Изменения DOM JavaScript в Touchmove откладываются до тех пор, пока на мобильном Safari не закончится прокрутка

16

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

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

More: Очевидно, это не ограничено изменениями className, но, по-видимому, любыми изменениями в DOM, такими какinnerHTML а такжеstyle.

Ваш Ответ

3   ответа
15

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

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

Ссылка выше кажется битой. Кто-нибудь может выложить пример кода?
Действительно произведение искусства.
кто-то может предоставить ссылку? где этот сайт
Да, это очень впечатляет. Отличная работа!
Было бы неплохо включить код ScrollAnimator.js, прежде чем ссылка исчезнет: /
13

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

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

Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts

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

Каким-то образом этот сайт преодолевает это ограничение. Кто-нибудь понимает, что они сделали?victoriabeckham.landrover.com/INT
Печаль. Чем больше я пытался, тем яснее становилось, что это так. Hilton Campbell
Подумав, я думаю, что столь тяжелые манипуляции с DOM не замедляют прелестную инерцию свитка.
Немного по факту, ноfacebook home делает это нормально на мобильном телефоне (Ipad)
Очень хороший эффект! Я могу ошибаться, но похоже, что они переопределяют прокрутку (в их методе touchMoveHandler в ScrollAnimator.js они используют event.preventDefault) и просто анимируют видимую область, чтобы выглядеть как прокрутка. Может быть и не прав, только посмотрите на это на несколько минут, но похоже, что это так! :)
3

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

Это! Невероятно! Я тянул свои волосы в течение нескольких дней, пытаясь найти решения для оживления чего-либо во время движения и прикосновения: липкий; это именно то, что мне было нужно. Я бы никогда не придумал это самостоятельно. Спасибо вам большое!
это прекрасно работает в iOS и более новых версиях настольного сафари. То, что я сделал для шапки, было специально для iOS, я использую это свойство, все остальное использует фиксированное, это из-за совместимости. Подробнее об этой собственности здесь:updates.html5rocks.com/2012/08/…

Похожие вопросы