Scrolling restriction on HTML5 canvas elements

Question

I have a series of rectangles drawn on a canvas and using a scroll event listener to move boxes up and down.

I am trying to add some check so that the boxes cannot scroll past a specific point.

Due to the acceleration, the scroll values ​​do not always increase by 1, so when fast scrolling, sometimes my check is performed too early.

Any ideas how to solve this?

So, in my event listener, I have:

lScroll += e.deltaY; if (lScroll > 0) { canScroll = false; lScroll = 0; } else { canScroll = true; } 

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

Answer 1

Please check if this works for you: https://jsfiddle.net/kr85k3us/4/

I tested it and it should work, but maybe you can move the mouse wheel faster :)

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

This is the part of the code that I added. If you cannot scroll, and lScroll is 0, this means that we have reached the top. Then I check if the first field is where it should be. If not (ie boxes[first]['y'] < 10 ), then it adjusts all the positions of " y ".