javascript - posicion - jQuery mobile+iScroll, no se puede desplazar hacia abajo

saber cuando se hace scroll jquery

Question

Estoy tratando de integrar jQuery Mobile con iScroll 4 . Soy consciente de que ya hay un proyecto que hace esto, sin embargo, lo estoy evitando debido a un error con los elementos de entrada (la página salta como loca al tipear).

Mi implementación actual se ve así:

http://jsfiddle.net/AqHsW/ - (Ejemplo JSFiddle) [ Espejo alternativo ]

Como probablemente haya notado, esto funciona sin problemas, excepto por una captura importante: no se puede desplazar hacia abajo. Este problema parece ser cross-os / browser.

Sin embargo, si mi reemplazo el método onBeforeScrollStart :

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

Funciona un poco mejor. Ahora uno puede desplazarse, pero el comportamiento se vuelve impreciso (junto con una respuesta lenta) en su lugar, lo que le permite al usuario desplazarse lo alto que quiere y así sucesivamente.

(Hacer esto solo parece alterar las cosas en iOS, sin embargo)

Ahora estoy buscando una solución a este problema, que preferiblemente es compatible con iOS 5 y 6, junto con el uso de elementos <input> . Este debería ser un problema bastante común, teniendo en cuenta que iScroll y jQuery Mobile son los dos marcos dominantes en la actualidad.

Answer 1

Puede ver esta demostración: http://lab.cubiq.org/iscroll5/demos/event-passthrough/

myScroll = new IScroll(''#wrapper'', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });

Answer 2

Jugué un poco con tu código, encontré un par de cosas y una solución, revisa el jsfiddle .

• Desde su carga jQuery , haga uso de jQuery(document).ready() .

• Parecía más apropiado iniciar iScroll en el elemento secundario directo del wrapper lugar del wrapper .

• En lugar de establecer la altura de la envoltura a través de CSS, utilicé Javascript para ser más preciso y evitar desbordamientos.

• FYI, scroll ya estaba definido como una función. (En tu violín usaste scroll como una variable)

• ¡Ahora funciona como un encanto!

$(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''s event to trigger their focus

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

   var iScroller = new iScroll(''scroller'');

});​