Ogranicz zdolność przewijania elementów canvas HTML5

Question

Posiadam serię prostokątów narysowanych na płótnie i używam odbiornika zdarzeń przewijania do przesuwania skrzynek w górę iw dół.

Próbuję dodać niektóre sprawdzania poprawności, tak aby pola nie można przewinąć przeszłości określonego punktu.

Z powodu przyspieszenia wartości przewijania nie zawsze zwiększają się o 1, więc przy szybkim przewijaniu czasami moja weryfikacja jest wykonywana zbyt wcześnie.

Wszelkie pomysły na rozwiązanie tego problemu?

Więc w moim detektora zdarzeń mam:

lScroll += e.deltaY; 

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

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

Answer 1

Proszę sprawdzić, czy to działa dla Ciebie: https://jsfiddle.net/kr85k3us/4/

Przetestowałem go i powinno działać, ale może możesz poruszać kółkiem myszy szybciej :)

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; }); 
    } 
} 

To jest kawałek kodu, który dodałem. Jeśli nie możesz przewinąć, a lScroll ma wartość 0, oznacza to, że osiągnęliśmy szczyt. Następnie sprawdzam, czy pierwsze pole jest tam, gdzie powinno być. Jeśli nie (to jest boxes[first]['y'] < 10), wówczas dostosowuje on wszystkie pozycje "y".