Scroll validation on HTML5 canvas elements

Question

This is a follow up from a previous question I asked a few weeks ago.

I've got two lines of scrolling boxes where there is now validation in place to prevent scrolling past the first box, but I'm having difficulty working out how to do something similar in the opposite direction to prevent scrolling past the last box.

This is the code that handles the scroll event from one row:

first = Object.keys(boxes)[0];
lScroll += e.deltaY;

if (lScroll < 0) {
    canlScroll = true;
} else {
    canlScroll = false;
    lScroll = 0;
}

Object.keys(boxes).forEach(function(key) {
    if(canlScroll && boxes[key]['s'] == 'l') {
        boxes[key]['y'] += e.deltaY;
    }
});

if (!canlScroll && lScroll == 0) {
    if (boxes[first]['y'] < 10) {
        var delta = 10 - boxes[first]['y'];

        Object.keys(boxes).forEach(function(key){
            if(boxes[key]['s'] == 'l') {
                boxes[key]['y'] += delta;
            }
        });
    }
}

Full example working here: https://jsfiddle.net/hbd6nL4e/1/

Answer 1

This could be a solution to your problem: RE-EDITED:

$(document).ready(function() {
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  c.addEventListener("mousewheel", scrolling, false);

  c.ctx = ctx;
  c.c = c;

  draw(ctx, c);
});

function draw(ctx, c) {
    // clear canvas for redraw
    ctx.clearRect(0, 0, c.width, c.height);

    // draw shapes
    Object.keys(boxes).forEach(function (key) {
        ctx.fillStyle = "#999";
        ctx.fillRect(boxes[key].x, boxes[key].y, boxes[key].w, boxes[key].h);
    });
}

function scrolling(e) {
    var mouseX = e.pageX - this.offsetLeft;

  // scroll left boxes
    if (mouseX <= 400) {
        first = Object.keys(boxes)[0];
        lScroll += e.deltaY;
    //console.log(lScroll);  
    //console.log((Object.keys(boxes).length/2)*(-100));
        if (lScroll < 0 && (lScroll>=(Object.keys(boxes).length/2)*(-100))) {

            canlScroll = true;
        } else {if (lScroll<(Object.keys(boxes).length/2)*(-100)){
            lScroll = (Object.keys(boxes).length/2)*(-100);
            canlScroll = false;//console.log("final down:"+lScroll);
        }

          else  {lScroll = 0; canlScroll = false;//console.log("final up:"+lScroll);
                }
        }

        Object.keys(boxes).forEach(function(key) {
                if(canlScroll && boxes[key].s === 'l') {
                  //console.log(e.deltaY/1.65);
                    boxes[key].y += Math.round(e.deltaY/1.65);
                }
            }
        );

        if (!canlScroll && lScroll === 0) {
            if (boxes[first].y < 10) {
                var delta = 10 - boxes[first].y;

                Object.keys(boxes).forEach(function(key){
                    if(boxes[key].s === 'l') {
                        boxes[key].y += Math.round(delta);
                      //console.log(""+Math.round(delta));
                    }
                });
            }
        }

  // scroll right boxes
    } else {
        first = Object.keys(boxes)[12];
        rScroll += e.deltaY;

        if (rScroll < 0 && (rScroll>=(Object.keys(boxes).length/2)*(-100))) {

            canrScroll = true;
        } else {if (rScroll<(Object.keys(boxes).length/2)*(-100)){
            rScroll = (Object.keys(boxes).length/2)*(-100);
            canrScroll = false;//console.log("final down:"+rScroll);
        }

          else  {rScroll = 0; canrScroll = false;//console.log("final up:"+rScroll);
                }
        }

        Object.keys(boxes).forEach(function(key) {
                if(canrScroll && boxes[key].s == 'r') {
                    boxes[key].y += (e.deltaY/1.65);
                }
            }
        );

        if (!canrScroll && rScroll === 0) {
            if (boxes[first].y < 10) {
                var delta = 10 - boxes[first].y;
                Object.keys(boxes).forEach(function(key){
                    if(boxes[key].s == 'r') {
                        boxes[key].y += delta;
                    }
                });
            }
        }

    }

    draw(e.target.ctx, e.target.c);
    e.preventDefault();
}

Edited and now it is working with both mouse and pointer pad. The reason why it was not functioning is because mouse and pointer pad deltaY are very different: one is 100px steps the other 2.5px. Now the only issue is that firefox is not handling it, in fact it works just on Chrome.

Check it here: http://output.jsbin.com/gobaguhehe