2012-01-22 6 views
8

tengo el iScroll habilitada en my page.Cómo NO-clic a href mientras se arrastra en iScroll

Aviso las imágenes de la rueda de desplazamiento son enlaces (por lo que una ventana emergente se abre para la imagen más grande, ¿sabes el trato). PERO una de las hermosas características de iScroll es que puedes arrastrar el mouse para desplazarte. PERO ahora, cuando alguien lo arrastra, automáticamente abre la imagen en lugar de desplazarse por la barra. ¿Hay alguna solución?

+0

tengo la sensación de que la colocación de un oyente en los enlaces es el camino a seguir. Es decir. cuando se hace clic en un enlace (que está sucediendo accidentalmente en este caso), se impide el comportamiento predeterminado, se comprueba si los usuarios se desplazan y si no abre el enlace de todos modos. Espero que esto te inspire a ti o a alguien más. (Me encantaría saber si este no es el camino a seguir) – Joep

+0

¿Todavía necesita iScroll con iOS5 fuera? ¿Por qué no utilizar '-webkit-overflow-scrolling: touch' – Matijs

+0

Me gustaría tener la misma funcionalidad tanto en el escritorio como en el móvil. Este es el único que sé que está bien. De acuerdo con las opiniones de los usuarios, etc. –

Respuesta

3

yo diría anexar una clase para cada anclaje mientras que el desplazador está siendo arrastrado. Por ejemplo, agregue un nombre de clase de "arrastrar" a cada anclaje mientras se arrastra, luego elimine la clase cuando se detiene el arrastre.

Esto significa que se puede añadir un preventDefault a cualquier enlace que tiene el "arrastre" de clase. Algo a lo largo de las líneas de:

myScroll1 = new iScroll('scroll1', { 
     snap: 'li', 
     momentum: false, 
     hScrollbar: false, 
     onScrollStart: function() { 
      $('div#iscroll1 a').addClass("dragging"); 
     }, 
     onScrollEnd: function() { 
      $('div#iscroll1 a').removeClass("dragging"); 
      document.querySelector('.indicator > li.active').className = ''; 
      document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; 
     } 
    }); 
    $('.dragging').click(function (e) { 
     e.preventDefault(); 
    } 

Este es el código sin embargo no probado lo que puede necesitar para refinar los selectores.

+0

También como una nota al margen. La rueda de desplazamiento no funciona para mí en IE8.It muere con un error: El objeto no admite esta propiedad o método Línea: 52 Char: 5 Código: 0 – Zappa

3

He creado un parche para iScroll que corrige este problema. Se puede ver el diff aquí: https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

Alternativamente se puede agarrar toda la versión parcheada de iScroll desde aquí: https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks

+0

Gracias por la nueva versión parcheada! Y justo a tiempo, ¡gracias! – Yisela

+2

¿Existe una versión de este parche para la nueva versión iscroll (4.2)? – Alvaro

-2

Hola versión aquí está modificada de iScroll 4.2.5 descargar

iScroll 4.2.5 + click fix

solución
onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();}, 
0

no funcionó para mí, aquí está mi solución simple. Establezca el arrastre en verdadero al arrastrar, establézcalo en falso cuando no lo esté. Si hace clic al arrastrar, ignórelo.

var myScroll = new iScroll("scroll1", { onBeforeScrollMove: function() { 
      window.dragging = true; 
     }, 
      onScrollEnd: function() { 
       //had to use a timeout here because without it it would fire on links at the end of the drag/dragging slowly 
       setTimeout(function() { 
        window.dragging = false; 
       }, 10); 
      } 

     }); 

y en los anclajes de verificación para arrastrar

$(".myanchors a").click(function() { 
     if (window.dragging) { 
      return false; 
     } 
    }); 
Cuestiones relacionadas