Мобильная прокрутка JQuery не плавная на iOS

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

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

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


ios jquery smooth-scrolling
person dixkin    schedule 18.01.2014    source источник

Ответы (5)


arrow_upward
21
arrow_downward

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

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

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

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

body {
    -webkit-overflow-scrolling: touch;    
}
person Scott David Murphy    schedule 14.03.2014
comment
Итак, в моем случае над приложением работал кто-то еще, и они ввели неправильное правило CSS, которое вызвало этот плохой опыт. Я обнаружил это, удалив весь CSS, кроме JQuery Mobile CSS. Затем я медленно добавлял остальную часть пользовательского CSS, пока не нашел неправильное правило. Это было довольно неприятно, но это было следствием того, что несколько человек работали над одним и тем же проектом. Причина, по которой я сначала подумал, что это JQuery Mobile, заключалась в том, что я также пытался удалить JQuery Mobile, и приложение отлично работало без него. Так что я думаю, что 2 правила конкурируют. - person Scott David Murphy; 15.03.2014
comment
Чемпион! Это очень помогло. - person Ryan Coolwebs; 05.06.2014
comment
Для меня это тоже помогло. Спасибо, Скотт! Можете ли вы рассказать нам дополнительно, что вы определили как плохие правила в вашем проекте? - person marcel; 24.03.2015
comment
да, он добавил это в css, что не имело смысла: html { overflow-y: scroll; } После того, как я удалил его, проблема решена. - person Scott David Murphy; 21.07.2015
comment
это то, что сработало для меня. .wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; } - person Mr. Crowley; 01.09.2015
comment
@ScottDavidMurphy Вы исправили проблему с фиксированным заголовком? - person ModusPwnens; 25.10.2017

arrow_upward
4
arrow_downward

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

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

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

overflow-x: hidden все испортил.

person EpicPandaForce    schedule 15.04.2015
comment
У всех, у кого есть такая проблема, попробуйте сначала этот! - person leymannx; 24.06.2015
comment
Возникла та же проблема, но предложенное решение не работает. Как только мне нужно установить высоту для прокручиваемого DIV, прокрутка больше не работает (дрожит). - person Jonny; 16.09.2018
comment
Спасибо за это в 2020 году! Это устранило мою проблему с вертикальной прокруткой, хотя мне пришлось добавить overflow-x:unset; - person Benny G; 04.01.2020

arrow_upward
0
arrow_downward

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

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

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

CSS Paint Times вызывает проблемы http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ ** обязательно нажмите ссылку «Непрерывное время рисования» внизу, чтобы узнать, как профилировать время рисования.

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

person dustinhorn    schedule 18.01.2014
comment
Спасибо, и, возможно, это проблема, но прокрутка на самом деле работает нормально, пока мой палец опущен - без дрожания или чего-то еще. Проблема заключается в том, что после прокрутки прокрутка просто останавливается и не следует импульсу прокрутки (как это происходит для большинства собственных прокруток). - person dixkin; 21.01.2014

arrow_upward
0
arrow_downward

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

person user3011237    schedule 04.02.2014

arrow_upward
0
arrow_downward

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

Установка:

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

Использование:

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

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

person Shoaib Chikate    schedule 18.09.2014