2012-08-13 12 views
5

Ho uno scroller di strumenti jQuery ... Mi piace che abbia l'opzione touch implementata per swipeLeft swipe Solo dritto.Strumenti Jquery Tocco orizzontale disabilita solo il tocco verticale

Quando uso touch: vero, lo fa ruota quando swipeUp/Giù così ..

ho seguito le istruzioni qui:

jQuery Tools Scrollable on touch disable vertical scroll

e qui:

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

ma nessuno sembra funzionare .. qualche idea? mio violino/demo è sotto per riferimento

violino: http://jsfiddle.net/mmp2m/7/

demo: http://jsfiddle.net/mmp2m/7/show

Grazie

risposta

5

Se l'unico controllo che si sta utilizzando è Scrollable allora si potrebbe modificare il codice sorgente per questo da here per risolvere quel comportamento o adattarlo come meglio credi.

ho modificato il fiddle avevi postato di includere il codice per il controllo Scrollable nella sezione JavaScript codice.

Le linee aggiunte nel codice per il controllo sono quelli con il commento // added al termine nel seguente frammento di codice:

// touch event 
    if (conf.touch) { 
     var touch = {}; 

     itemWrap[0].ontouchstart = function(e) { 
      var t = e.touches[0]; 
      touch.x = t.clientX; 
      touch.y = t.clientY; 
     }; 

     itemWrap[0].ontouchmove = function(e) { 

      // only deal with one finger 
      if (e.touches.length == 1 && !itemWrap.is(":animated")) {    
       var t = e.touches[0], 
        deltaX = touch.x - t.clientX, 
        deltaY = touch.y - t.clientY, 
        absX = Math.abs(deltaX),        // added 
        absY = Math.abs(deltaY);        // added 

       // Only consider the event when the delta in the 
       // desired axis is greater than the one in the other. 
       if(vertical && absY > absX || !vertical && absX > absY) // added 
        self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev'](); 

       e.preventDefault(); 
      } 
     }; 
    } 

Ho provato questo in Android con i browser nativi e Opera e sembra lavorare come previsto

+0

Ho tentato di modificare il codice ma senza fortuna ... ho impostato il 'deltaY = 0' e' vertical && deltaY> 0 || 'ma non ha funzionato ... ma il vostro lavoro di soluzione :) può mi dici cosa || e ? Significare? – MonteCristo

+0

Il '?' È usato per esprimere un'istruzione 'if' in linea, la sua struttura è' boolean-expr? then-expr: else-expr; '. '||' è solo l'operatore logico 'or' che viene usato nel' boolean-expr' dell'istruzione 'if' inline. Per ulteriori informazioni sull'operatore '' 'controlla questa domanda SO: http://stackoverflow.com/questions/10270351/how-to-write-a-inline-if-statement-in-javascript –

+1

Aveva un leggero bug dove è e.preventDefault(); impedito lo scorrimento verso il basso della pagina quando si scorreva ... la versione fissa è qui http://jsfiddle.net/shavindra/nvyU8/4/ – MonteCristo

0

ero alle prese con lo stesso problema per un tempo finché ho scoperto questa FIX-

Initialization-

var $scroller1 = $('#outer-container1').kinetic({'y':false}); 

Ciò impedisce di scorrimento verticale sul contenitore, ma non consegna lo scorrimento verticale scroller del browser.

Quindi passare al codice sorgente jQuery Kinetic e commentare lo e.preventDefault() per tutti gli eventi di azione del mouse e scorrimento.

Questo ha funzionato per me. https://github.com/davetayls/jquery.kinetic/issues/33

Problemi correlati