javascript - change - jquery css multiple

iScroll no permitirá que se haga clic en los elementos

Question

¡Estoy usando iScroll4 y está funcionando muy bien!

Estas son las funciones que utilizo para iniciar, actualizar y finalizar 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 deja que <a> o <input> o nada para hacer clic (o centrar, no estoy seguro); también css: hover o: focus no se aplicará; pero dispararía eventos en javascript como

.hover() or .click()

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

Answer 1

Cuando descubrí iScroll por primera vez, pensé que era la solución a muchos de mis problemas. Entonces este tema me mordió a lo grande. Al intentar encontrar una solución alternativa, se me ocurrió esta solicitud de extracción .

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 es / 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 correspondiente se puede encontrar here . Todavía no he tenido la oportunidad de probarlo (espero confirmar el soporte de Android más tarde hoy).

Answer 2

El autor ha comentado que la compatibilidad de formularios es errónea: 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 la v4.1.9, el soporte para campos de formulario aún está en desarrollo. Puede hacer que los botones de radio y las casillas de verificación funcionen envolviéndolos en una etiqueta (el ajuste parece funcionar mejor posiblemente que con la sintaxis de = "").

Los enlaces deben estar bien y funcionar en las demostraciones proporcionadas. Ha comentado la llamada e.preventDefault() en su script de inicio, que es el culpable habitual. Tal vez el problema de compatibilidad de formulario está afectando los enlaces también?

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

Espero que esto 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 de una en una y siga probando. Pronto sabrás qué modificación rompe el comportamiento deseado.

Answer 3

El 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 del error: el procesamiento incorrecto del evento de clic que iScroll envía de vuelta al navegador (eliminando preventDefault simplemente detiene el envío de este evento de clic) El navegador Android Chrome está libre de este error porque ha actualizado la biblioteca WebKit en su interior.

Esperando la actualización de Android WebKit de Google.

Answer 4

Prueba esto

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

Answer 5

Solo necesitas hacer estos cambios en el cargador de iscroll:

Cambia esta línea:

myScroll = new iScroll(''wrapper'');

Para esto:

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();
}
});

Answer 6

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é en mi búsqueda de la herramienta adecuada. Otras respuestas han sugerido cómo puede solucionar su problema específico, pero en realidad sugeriría el uso de la scrollability (por Joe Hewitt) o del touchscroll (por David Aurelio). Creo que la capacidad de desplazamiento en realidad ofrece la mejor sensación, pero en realidad no está terminada 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 clics personalizadas y verificar el tiempo de espera cuando estaba experimentando con iscroll hace unas semanas en mi proyecto y lo hice comentando e.preventDefault () en el inicio del toque e insertando algunas de mis propias funciones. para atrapar cuando en realidad se desplaza. En su corazón, todas estas bibliotecas funcionan de la misma manera (capturando eventos y previniéndolos, ejecutando transformaciones css para hacer que las animaciones de redibujado sean más suaves y luego disparar artificialmente cualquier evento que deba activarse). Esto significa que la otra forma en que puede solucionarlo es buscar cuándo debe 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 deteniendo el burbujeo ... No puedo recordar si iscroll hace lo mismo.

Esta (animación suave, nativa, animación en dispositivos móviles) sigue siendo un área que está al límite de las diversas tecnologías, por lo que nadie tiene la solución completa todavía. Esperaría que en unos pocos años, la mejora móvil de modo que los navegadores móviles manejen los eventos de desplazamiento de forma nativa de todos modos, pero hasta entonces nos vemos obligados a hackear soluciones como esta. ¡Buena suerte!

Answer 7

Una solución que he usado es "congelar" el desplazamiento cuando quiero que el usuario pueda realizar ediciones. La incompatibilidad que tiene iScroll con las entradas está relacionada en la medida en que puedo ver las transformaciones de css en combinación con el soporte táctil que se aplica al contenido del control de desplazamiento. Si desactivas temporalmente el control de desplazamiento, puedes permitir que el usuario ingrese valores. El truco es asegurarse de que la ubicación de desplazamiento actual del contenido se conserva al deshabilitarlo. Cuando está "congelado", un usuario puede actualizar las entradas dentro del área visible. El inconveniente es que la rueda de desplazamiento no se desplazará durante este estado. Tendrás que descongelarlo en algún evento.

Agregué estas funciones al iScroll.prototype para hacer que esto funcione:

_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();
}

Llamarlo o congelarlo se vería como:

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

Descongelarlo se vería como:

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

Obviamente, necesitarás integrar esto en tu propio proyecto de alguna manera, pero ha funcionado para mí. No es ideal, así que estoy deseando que llegue la actualización de iScroll. Advertencia: esto no se ha probado en IE, así que no responderé por ello. Espero que esto sea al menos un comienzo para ayudarte a trabajar.

Answer 8

comentar

position:absolute;

en #pageWrapper en styles.css

En mi caso, esto solucionó el problema inescrutable anterior.

Answer 9

  // 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 necesito agregar click: verdadero en la última línea ... Pasé todo el día depurando e implementando todas las soluciones sugeridas en vano ...