2012-04-02 17 views
9

Come posso disabilitare il contenuto verticale scorrere in jquery mobile? Voglio disabilitare tutto lo scorrimento per il contenuto della pagina. Grazie.jQuery mobile disabilita il contenuto della pagina di scorrimento verticale


Creo la pagina jquery.mobile e nel contenuto aggiungo jquery.mobile.scrollview. Quando uso scrollview, il mio contenuto della pagina scorre in alto e in basso. Come posso disattivare i contenuti di scorrimento? Il mio codice pagina:

<div id="page2" data-role="page" align="center"> 
    <div data-role="content"> 
     <div id="mydatacontent" class="form"> 
      <div class="data-table-shadow" data-scroll="y" class="square single-block-view-v" style="height: 750px;"> 
       <table id="datatable" class="data-table"> 
        <tbody id="datatableContent"> 
         <!-- Table Data Here --> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
+0

si desidera interrompere lo scorrimento in entrambe le direzioni o solo in verticale ... event.preventDefault ti aiuterà a prevenire lo scorrimento – iDroid

risposta

13

È possibile associare all'evento touchmove e return false per evitare che il comportamento predefinito dell'evento touchmove:

$(document).delegate('.ui-content', 'touchmove', false);​ 

Questo dovrebbe disattivare lo scorrimento su tutti gli elementi data-role="content". È possibile aggiornare il selettore .ui-content in modo più specifico se si desidera solo questa funzionalità su una o più pagine.

Ecco una demo è possibile provare sul tuo dispositivo mobile: http://jsfiddle.net/RKXLH/embedded/result/

+4

Volevo solo che tu sapessi che c'è un carattere invisibile * sgradevole * alla fine dello snippet. L'ho copiato/incollato per giocare e non ha funzionato. Lo abbiamo capito solo dopo 15 minuti di lotta. –

+0

@ JoãoCunha Interessante, non vedo nulla. Potrebbe essere una differenza tra il set di caratteri della pagina e quello che stai utilizzando nell'applicazione di editor. – Jasper

+0

Posso confermare, è successo anche a me in phpstorm su Windows. Cancellando la linea e ridigitandola manualmente la si aggiustava. –

14

ho trovato la risposta di cui sopra per funzionare bene. Tuttavia, ciò impedirà lo scorrimento degli elementi figlio di ".ui-content". Io uso il

"scrollstart"

evento, invece, e gli elementi figlio sono ancora scorrevole.

$(document).delegate(".ui-content", "scrollstart", false); 

Testato su Web View iOS6.

+1

Il metodo sopra funziona. Ma come tornare indietro ?? Ad esempio, se dopo aver interrotto lo scorrimento, di nuovo se si desidera avviare lo scorrimento, cosa si dovrebbe fare? - Grazie – Mak

+3

@Mak Dovresti quindi rimuovere il gestore di eventi delegato usando '.undelegate()': http://api.jquery.com/undelegate/. Se usi '.on()' allora puoi usare '.off()' per rimuovere il gestore di eventi. '.live()' ha '.die()', ma a questo punto dovresti allontanarti da '.live()'. – Jasper

+0

@Jasper ha fatto la stessa cosa ... ha funzionato! – Mak

6

Nella mia esperienza che hanno a che fare in questo modo:

var touchScroll = function(event) { 
    event.preventDefault(); 
}; 

$('element1').click(function() { 
    //this will disable the scroll 
    $(this).bind('touchmove', touchScroll); 

    $('element2').click(function() { 
     //this will enable scrolling 
     $(document).unbind('touchmove', touchScroll); 
    }); 
} 

element1 e elemento2 può essere tutto quello che vuoi, e, naturalmente, la funzione di scatto è solo per l'esempio, è possibile scegliere qualsiasi funzione che si desidera.

+0

funziona ... grazie mille .... Dio ti benedica .... –

Problemi correlati