JQuery mobile + iScroll, невозможно прокрутить вниз

Я пытаюсь интегрировать jQuery Mobile с iScroll 4. Я знаю, что уже существует проект который делает это, однако я избегаю этого из-за ошибки с входными элементами (страница при прыжке сбрасывается как сумасшедшая).

Моя текущая реализация выглядит следующим образом:

http://jsfiddle.net/AqHsW/ - (пример JSFiddle) [Альтернативное зеркало]

Как вы, наверное, отметили, это работает безупречно, за исключением одного крупного улова: нельзя прокручивать вниз. Эта проблема кажется кросс-os/браузером.

Однако, если я переопределяю метод onBeforeScrollStart:

var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });

Он работает несколько лучше. Теперь можно прокручивать, но поведение становится глючным (наряду с медленной отзывчивостью) вместо этого, позволяя пользователю прокручивать, как высоко он хочет и т.д.

(Однако, похоже, это только что меняет вещи на iOS)

Теперь я ищу решение этой проблемы, которое предпочтительно поддерживает iOS 5 и 6, а также элементы <input>. Это должно быть довольно распространенной проблемой, учитывая, что iScroll и jQuery Mobile являются двумя доминирующими структурами сегодня.

ОТВЕТЫ

Ответ 1

Я немного поиграл с вашим кодом, нашел пару вещей и решение, посмотрел jsfiddle.

  • С момента загрузки jQuery используйте jQuery(document).ready().

  • Кажется более целесообразным инициализировать iScroll для прямого дочернего элемента wrapper, а не wrapper.

  • Вместо того, чтобы устанавливать высоту обертки через CSS, я использовал javascript, чтобы быть более точным и избегать переполнения.

  • FYI, scroll уже определен как функция. (в вашей скрипке вы использовали scroll как переменную)

  • Теперь он работает как шарм!

$(function(){

    var footerHeight = $('[data-role="footer"]').outerHeight(true),
        headerHeight = $('[data-role="header"]').outerHeight(true),
        padding = 15*2; //ui-content padding

   $('#wrapper, #scroller').height( $(window).innerHeight() - headerHeight - footerHeight - padding );

   // To make inputs focusable,
   // you can rebind their touchend event to trigger their focus

   $('input').on('touchend', function(){
       $(this).focus();
   });

   var iScroller = new iScroll('scroller');

});​