unità di incremento in aree scrollabili/div in javascript?

Question

in javascript posso fare in modo che il mio grande scorrimento verticale div solo in blocchi di (diciamo) 16 pixel

in Java, quelli sono chiamati 'unità di incremento.

Non riesco a trovare nulla di simile in javascript: Voglio garantire che una certa area (div) quando parzialmente scorre è sempre un multiplo di 16 la vista.

Ciò mi consente di eseguire trucchi con immagini di sfondo e altri.

grazie

Answer 1

var lastScroll = 0; 
$('div').scroll(function(){ 
    var el = $(this), 
     scroll = el.scrollTop(), 
     round = lastScroll < scroll ? Math.ceil : Math.floor; 
    lastScroll = round(scroll/16) * 16; 
    el.scrollTop(lastScroll); 
}); 

http://jsfiddle.net/m9DQR/2/

Assicura rotoli sono fatti in multipli di 16 pixel. Si può facilmente estendere questo per essere un plugin che consente una quantità variabile (non un fisso, magico 16).

Answer 2

Sì, questo è possibile, ma richiederà utilizzando JavaScript per catturare l'evento scroll e poi manipolarlo. Questo script (mi dispiace jQuery è quello che ho avuto) e sovrascrive l'evento di scorrimento. Quindi lo sostituisce con la stessa distanza di scorrimento. È possibile eseguire la propria matematica per regolare il valore di scrollTo. Dobbiamo controllare sia la rotellina del mouse che gli eventi di DOMMouseScroll perché il primo non è supportato da FF. Questo non sembra essere applicabile nel tuo caso, ma un utente può avere il numero di righe da scorrere impostato su un valore diverso da quello predefinito tre. Quindi l'istruzione if calcola la distanza. L'ho lasciato lì, anche se altre persone inciampano in questa domanda e per loro è importante.

$('body').bind('mousewheel DOMMouseScroll', function(e) { 
    var scrollTo = null; 
    if (e.type == 'mousewheel') { 
    scrollTo = (e.wheelDelta * -1); 
    } 
    else if (e.type == 'DOMMouseScroll') { 
    scrollTo = 40 * e.detail; 
    } 
    //adjust value of scrollTo here if you like. 
    scrollTo = 16; 
    if (scrollTo) { 
    e.preventDefault(); 
    $(this).scrollTop(scrollTo + $(this).scrollTop()); 
    } 
}); 

Answer 3

Provenendo da un altro linguaggio di programmazione ho trovato anche JavaScript difficile quando si tratta di interfaccia utente. Nel tuo caso dovrei semplicemente impostare un gestore per l'evento onscroll e interrogare la posizione del div relativo alla posizione di scorrimento. Restituisce false ogni volta che la posizione di div non è divisibile per 16px e crea un contatore per consentire il riposizionamento dopo lo scorrimento di un altro 16px.