Как предотвратить прыжки с мобильных сафари при выгрузке страниц из списка на iPad?

Question

Я разрабатываю бесконечный список, используя HTML5 на iPad с сетчаткой. Идея состоит в том, чтобы отобразить две страницы, а затем удалить первую страницу и добавить следующую в нижнюю часть списка. Он отлично работает на Desktop Safari и Chrome, но не на iPad.

В примере представлены две страницы. Все сообщения имеют ту же высоту 120px, но самую первую с высотой 300px. Чтобы воспроизвести проблему, прокрутите до самого низа и нажмите кнопку LoadMore, и вы должны заметить, что она вскакивает, а затем в правильное положение. Похоже, есть небольшая задержка между прокруткой и удалением. Теперь все сообщения имеют одинаковую высоту 120px, и если вы прокрутите снизу и нажмите кнопку снова, прыжков не будет, и он будет вести себя так, как ожидалось. Нажмите кнопку перезапуска, чтобы начать заново.

Link to the example.

Расположение:

<div class="container"><div class="innerContainer"> 
    <div class="page"> 
    <div class="message" style="height:300px">...</div> 
    <div class="message">...</div> 
    <div class="message">...</div> 
    <div class="message">...</div> 
    <div class="message">...</div> 
    </div> 
    <div class="page"> 
    ... 
    </div> 
</div> 
</div> 

Пожалуйста, обратите внимание, что поведение точно так же, если я использую UL и Lis вместо DIVs.

Код кнопки LoadMore:

newScrollPosition = container.scrollTop()-firstPage.outerHeight(); 
container.scrollTop(newScrollPosition); 
innerContainer.append(newPage); 
firstPage.remove(); 

Он отлично работает, когда все сообщения имеют одинаковую высоту, но когда сообщение имеет разную высоту он прыгает некрасиво.

Просто помните, что проблема возникает только в самом низу списка.

Я попытался следующими способами удаления Firstpage, но результат всегда один и тот же:

• дисплей: нет
• JQuery удалить
• elem.parentNode.removeChild (эль)
• Абсолютное положение сверху и слева снаружи экрана

Answer 1

Лучшим обходным решением, которое я придумал, является замена прокрутки на основе прокрутки {переполнения: касания} библиотекой iScroll 5. Он работает на iPad и настольных платформах без проблем.

iScroll использует переходы CSS3 для замены естественной прокрутки.

Link to the example.

Я заменил следующий код

newScrollPosition = container.scrollTop() - firstPage.outerHeight(true); 
container.scrollTop(newScrollPosition); 

с

newScrollPosition = scroller.y + firstPage.outerHeight(true); 
scroller.scrollTo(0, newScrollPosition); 

важно, чтобы обновить скроллер, когда DOM изменяется.

Link to iScroll library.

Answer 2

Если вы попытались jQuery.remove, вы попробовали slideUp?

У меня был подобный вопрос некоторое время назад, и он, по крайней мере, остановился, если прыгать, а затем он плавно скользит.