2011-12-01 27 views
17

¡Estoy usando iScroll4 y está funcionando genial!iScroll no permitirá que se haga clic en los elementos

Esta son las funciones que utilizo para init, refrescar y poner fin a iScroll:

function iniciarIscroll(){ 
    /*En ie7 no lo usamos*/ 
    if(!ie7){ 
     $(document).ready(function() { 
      myScroll1 = new iScroll('nvl1'); 
      myScroll2 =new iScroll('nvl2'); 
      /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
      document.addEventListener('DOMContentLoaded', setTimeout(function() { loaded(); }, 200), false);*/ 
     }); 
    } 
    return false; 
} 

function refrescarIscroll(){ 
    if(!ie7){ 
     myScroll1.refresh(); 
     myScroll2.refresh(); 
    } 
    return false; 
} 


function terminarIscroll(){ 
    if(!ie7){ 
     myScroll1.destroy(); 
     myScroll1 = null; 
     myScroll2.destroy(); 
     myScroll2 = null; 
    } 
    return false; 
} 

El problema es que no va a dejar <a> o <input> o cualquier cosa que se ha hecho clic (o centrado, no estoy seguro) ; también css: hover o: el foco no se aplicará; pero dispararía eventos en javascript como

.hover() or .click() 

¿Alguna idea de cómo solucionar esto si es posible?

+2

alguna posibilidad de poner esto en un violín para que podamos ver el problema en la acción? aquí hay uno para que comiences ... http://jsfiddle.net/zander/AHEuC/ – JorgeLuisBorges

+0

Este hilo podría estar duplicado con http://stackoverflow.com/questions/5745374/iscroll-4-problem-with-form- select-element-iphone-safari-and-android-browser; te ayudaría –

Respuesta

10

El autor ha comentado que la compatibilidad de formularios es un error: es un problema conocido y está trabajando en una solución para la próxima versión. Alguien más ha comentado en los foros:

A partir de v4.1.9, el soporte para los campos de formulario todavía está en desarrollo. Usted puede hacer que los botones de radio y casillas de verificación funcionen envolviendo en una etiqueta (el ajuste parece funcionar mejor posiblemente que usar for = "" sintaxis).

Los enlaces deberían estar bien y funcionar en las demostraciones proporcionadas. Ha comentado la llamada e.preventDefault() en su guión de inicio, que es el culpable habitual. ¿Tal vez el problema de compatibilidad de formularios también está afectando a los enlaces?

En cuanto al evento de desplazamiento, por lo que puedo decir, esto debe activarse cuando se toca un elemento.

Espero que ayude un poco. En el peor de los casos: elimine su código y comience con una página de demostración del proyecto, adáptese a sus necesidades una línea a la vez y siga probándolo. Pronto sabrá qué modificación rompe el comportamiento previsto.

2

Una solución que he usado es "congelar" el iscroll cuando quiero que el usuario pueda editarlo. La incompatibilidad que iScroll tiene con las entradas se relaciona, hasta donde yo sé, con las transformaciones de CSS en combinación con la compatibilidad táctil que se aplica al contenido en la rueda de desplazamiento. Si desactiva temporalmente la rueda de desplazamiento, puede permitir que el usuario ingrese los valores. El truco es asegurarse de que la ubicación de desplazamiento actual del contenido se conserva al deshabilitar. Cuando está "congelado", un usuario puede actualizar las entradas dentro del área visible. La desventaja es que la barra de desplazamiento no se desplazará durante este estado. Tendrás que descongelarlo en algún evento.

que añaden estas funciones a la iScroll.prototype para hacer este trabajo:

_get_current_scroll_px: function (transformStyle) { 
    //return the first string that looks like an integer, that should be the x translation 
    return /[\-0-9]+px/.exec(transformStyle)[0]; 
}, 


freeze: function() { 
    this.disable(); 
    this.savedStyle = this.scroller.style[vendor + 'Transform']; 
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller 
    this.scroller.style[vendor + 'Transform'] = ''; 
}, 

thaw: function() { 
    this.scroller.style[vendor + 'Transform'] = this.savedStyle; 
    this.scroller.style['marginLeft'] = '0'; 
    this.enable(); 
} 

Llamando o congelación que se vería así:

//user triggered event causes freeze 
yourFreezeEventCallback: function() { 
    myScroll1.freeze(); 
    //now user can use visible inputs on screen 
} 

descongelación que se vería así:

//user triggered event causes thaw 
yourThawEventCallback: function() { 
    myScroll1.thaw(); 
    //now scrolling is back and inputs can no longer be edited or in focus 
} 

Obviamente, tendrá que integrar esto en su propio proyecto de alguna manera, pero me ha funcionado. No es ideal, así que estoy esperando la actualización de iScroll. Advertencia: esto no se prueba en IE, así que no lo atestiguaré allí. Espero que esto sea al menos un comienzo para ayudarlo a trabajar.

2

Cuando descubrí por primera vez iScroll, pensé que era la solución a muchos de mis problemas. Entonces este problema me llamó la atención.Al tratar de encontrar una solución alternativa, se me ocurrió this pull request.

Hay una nota en la solicitud de extracción que se ha encontrado otra solución mejor, aunque no estoy seguro de qué solicitud de extracción se supone que solucionó el problema. Veré si puedo obtener información más detallada del autor de esa nota.

Actualización: la solicitud de extracción relevante se puede encontrar here. No he tenido la oportunidad de probarlo todavía (espero confirmar el soporte de Android más tarde).

0

También he estado trabajando para hacer que las cosas se desplacen sin problemas en el entorno móvil e iscroll fue una de las bibliotecas que consideré mi búsqueda de la herramienta correcta. Otras respuestas han sugerido cómo puede solucionar su problema específico, pero en realidad sugiero usar scrollability (por Joe Hewitt) o touchscroll (por David Aurelio). Creo que la capacidad de desplazamiento en realidad ofrece la mejor sensación, pero en realidad no está hecha y terminarías enfrentando los mismos problemas o problemas similares. Personalmente estoy usando touchscroll para un proyecto mío y lo recomiendo.

Tuve que poner acciones de clic personalizado y comprobación de tiempo de espera cuando estaba experimentando con iscroll hace unas semanas en mi proyecto y lo hice al comentar el e.preventDefault() al comienzo del toque e insertando algunos de mis propias funciones para atrapar cuando realmente se desplaza. En su esencia, todas estas bibliotecas funcionan de la misma manera (capturando eventos y previniéndolos, ejecutando transformaciones css para hacer animaciones más suaves que DOM-redrawing, y luego disparando artificialmente cualquier evento que deba ser activado). Esto significa que la otra forma en que puede solucionarlo es encontrar cuándo debería ocurrir el evento del clic para sus elementos específicos y dispararlo manualmente en el código. En touchscroll, escucha los eventos en el elemento superior para que pueda sobrescribir el comportamiento simplemente al detener el burbujeo ... No puedo recordar si iscroll hace lo mismo.

Esta (sensación suave y natural, animación en el móvil) sigue siendo un área que se encuentra al borde de las diversas tecnologías por lo que nadie tiene la solución completa todavía. Me gustaría esperar que en unos años, los dispositivos móviles mejoren, de modo que los navegadores móviles simplemente manejen los eventos de desplazamiento de forma nativa de todos modos, pero hasta entonces nos vemos obligados a hackear soluciones como estas. ¡Buena suerte!

19

Sólo necesita hacer este cambio en el cargador de la iscroll:

cambiar esta línea:

myScroll = new iScroll('wrapper'); 

Por esta:

myScroll = new iScroll('wrapper', { 
useTransform: true, 
zoom: false, 
onBeforeScrollStart: function (e) { 
var target = e.target; 
while (target.nodeType != 1) target = target.parentNode; 

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 
e.preventDefault(); 
} 
}); 
+0

Esto lo arregló para mí, y fue una solución bastante fácil de implementar –

+0

@yenssen ¡muchas gracias! Solucionado el problema y funciona bien;) – punkbit

+1

no funcionó para mí, no hizo ninguna diferencia –

12
// Setup myScroll 
    myScroll = new IScroll('#wrapper', { 
    scrollX: horizontalSwipe, 
    scrollY: !horizontalSwipe, 
    momentum: false, 
    snap: document.querySelectorAll('#scroller .slide'), 
    snapSpeed: 400, 
    bounceEasing: 'back', 
    keyBindings: true, 
    click: true 
    }); 

Para mí, solo tiene que agregar clic: verdadero en la última línea ... Pasé todo el día depurando e implementando todo las soluciones sugeridas en vano ...

+1

'click: true' resolvió mi problema al no poder hacer clic en los enlaces dentro de un marco iscroll en el iPad. Pasaría el cursor pero no haría clic. –

0

Error del navegador de Android es el resultado de una versión muy antigua de WebKit dentro de Android, incluso dentro de Android 4.3. La causa raíz de la falla: procesamiento incorrecto del evento de clic que iScroll envía de vuelta al navegador (eliminando que prevenirDefault simplemente deje de enviar este evento de clic) El navegador Android Chrome está libre de este error porque ha actualizado la biblioteca WebKit.

Esperando Android WebKit upgrade from Google.

0

comentario cabo

position:absolute; 

en #pageWrapper en styles.css

En mi caso, esto soluciona el problema unclickable anteriormente.

0

probar este

myScroll = new IScroll('#wrapper', { click: true }); 
Cuestiones relacionadas