Переместить изображение с событием touchmove на iPad

Question

У меня есть веб-сайт с фиксированным фоновым изображением, которое я пытаюсь адаптировать для iPhone и iPad, поскольку изображение не остается статичным. Я пробовал разные обертки без удачи; либо я не могу прокрутить в одну сторону, либо сайт не прокручивается должным образом (из-за использования динамического AJAX). Поэтому я начал искать, есть ли способ перемещения фона изображения с помощью прокрутки страницы, и я использовал следующее:

$(document).bind('touchmove',function(e){
    $('.background_image').css({top: $(document).scrollTop()});
$('.background_image img').css({top: $(document).scrollTop()});
console.log($('.background_image img').css('top'));
});

$(document).bind('scroll', function() {
    $('.background_image').css({top: $(document).scrollTop()});
    $('.background_image img').css({top: $(document).scrollTop()});
});

Кажется, это работает для первого «прикосновения», но затем фон не движется непрерывно. Когда я перестаю двигаться, «свиток» связывается и перемещает изображение в правильное место. Это возможный подвиг, или я пытаюсь достичь невозможного здесь? Регистрация результатов показывает, что CSS действительно изменяется, но экран не обновляется с ним.

UPDATE

Я не знаю, поможет ли это, но вот HTML / CSS, который я сейчас использую:

<div class="background_image">
    <img src="image.jpg" />
</div>

.background_image {
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
z-index: -1;
}

.background_image img {
position: fixed;
overflow: hidden;
top: 0px;
left: 0px;
background: white;  
}

Также изменил мой код на что-то немного более простое.

Приветствия

Dan

Answer 1

Кажется, это работает для первого «прикосновения», но затем фон не движется непрерывно. Когда я перестаю двигаться, «свиток» связывается и перемещает изображение в правильное место. Это возможный подвиг, или я пытаюсь достичь невозможного здесь? Регистрация результатов показывает, что CSS действительно изменяется, но экран не обновляется с ним.

К сожалению, в настоящее время это невозможно на устройствах iOS. Я уже некоторое время использую jQuery Mobile для сайтов, оптимизированных под iOS, и это один из больших недостатков. Команда jQuery Mobile описывает проблему следующим образом (см. здесь .):

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

Вот причина поведения, которое вы наблюдаете. События ставятся в очередь и обновляют изображение bg после завершения прокрутки. Скорее всего, вы сможете решить эту проблему с помощью iScroll , который полностью заменяет встроенный обработчик прокрутки в выбранном вами контейнере, хотя я не уверен, стоит ли это того для задачи, которую вы пытаетесь выполнить.

Answer 2

Мы решили использовать обходное решение и внедрить изображения для iPhone, которые постепенно исчезают внизу до заданного цвета фона.