Блог

У меня есть веб-сайт с фиксированным фоновым изображением, которое я пытаюсь адаптировать для 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()});
});
  

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

Обновить

Я не знаю, помогает ли это, но вот 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

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

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

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

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

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