Capacità di scorrimento limite su elementi canvas HTML5

Question

Ho una serie di rettangoli disegnati su una tela e utilizzo un listener di eventi di scorrimento per spostare le caselle su e giù.

Sto tentando di aggiungere alcune convalide in modo che le caselle non possano scorrere oltre un certo punto.

A causa dell'accelerazione, i valori di scorrimento non sempre aumentano di 1, quindi quando si scorre velocemente, a volte la convalida inizia troppo presto.

Qualche idea su come risolvere questo problema?

Così nel mio listener di eventi ho:

lScroll += e.deltaY; 

if (lScroll > 0) { 
    canScroll = false; 
    lScroll = 0; 
} else { 
    canScroll = true; 
} 

https://jsfiddle.net/kr85k3us/3/

Answer 1

Si prega di verificare se questo funziona per voi: https://jsfiddle.net/kr85k3us/4/

ho testato e dovrebbe funzionare, ma forse puoi spostare la rotellina del mouse più velocemente :)

if (!canScroll && lScroll == 0) { 
    var first = Object.keys(boxes)[0]; 

    if (boxes[first]['y'] < 10) { 
     var delta = 10 - boxes[first]['y']; 
     Object.keys(boxes).forEach(function(k){ boxes[k]['y'] += delta; }); 
    } 
} 

Questo è il pezzo di codice che ho aggiunto. Se non riesci a scorrere e lScroll è 0, significa che abbiamo raggiunto la cima. Successivamente, controllo se la prima casella è dove dovrebbe essere. In caso contrario (vale a dire boxes[first]['y'] < 10), allora regola tutte le caselle nella posizione .