JQuery Mobile Прокрутка не гладкая на iOS

У меня есть многостраничное приложение, написанное с помощью JQuery 1.4, отображаемое в iOS WebView. Он использует статический заголовок, а контент имеет 20 или около того div со встроенными изображениями и текстом. Я не пользуюсь PhoneGap.

В WebView и в Safari я могу прокручивать содержимое по вертикали, но я не получаю такую же гладкость, какую вы получили в приложении iOS (т.е. прокрутка продолжается немного после появления пальца = "гладкая" прокрутка"). Свиток просто останавливается, когда мой палец отрывается от экрана.

Есть ли параметр или проблема, о которых я не знаю, когда речь заходит о гладкой прокрутке содержимого в JQuery Mobile?

Ответ 1

Я думаю, что это связано с тем, что вы больше не прокручиваете элемент <body>, а скорее JQuery Mobile Page <div>. Если вы создаете прокрутку <div> без JQuery Mobile, вы сможете реплицировать этот изменчивый опыт.

То, что вы ищете, на самом деле называется прокруткой импульса и иногда также называется инерциальной прокруткой.

Предположительно, вы должны добавить свойство css -webkit-overflow-scrolling: touch; в div, в который хотите добавить прокрутку импульса, и он должен работать, но я не смог заставить это работать на странице <div>. Я попытался добавить его в тело, и я смог получить правильную прокрутку, но мой фиксированный заголовок начал прыгать, когда я прокручивался.

Если у вас нет фиксированного заголовка, не стесняйтесь сделать снимок.

body {
    -webkit-overflow-scrolling: touch;    
}

Ответ 2

Для нас проблема была в CSS jQuery Mobile, и мы исправили это следующим образом:

.ui-mobile .ui-page-active{display:block;overflow:visible;/*overflow-x:hidden*/}

Исправлена ошибка прокрутки для нас.

overflow-x: hidden перепутали вещи.

Ответ 3

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

Вы можете прочитать здесь больше:

Сжатие изображения http://www.html5rocks.com/en/tutorials/speed/img-compression/ ** прокрутите вниз для ссылок на приложения, которые вы можете использовать

Время рисования CSS-красок http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ ** не забудьте щелкнуть ссылку "Непрерывная краска" внизу, чтобы посмотреть, как пролить время рисования.

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

Ответ 4

Вы можете попробовать использовать кинематическую библиотеку jquery Dave Taylor, чтобы добавить в контейнеры некоторую активность прокрутки: http://davetayls.me/jquery.kinetic/

Ответ 5

Возможно, вы можете использовать плагин nicescroll, который работает на многих платформах.

Установка:

<script src="jquery.nicescroll.js"></script>

Применение:

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

Вот ссылка на плагин nicescroll