HTML5画布元素上的滚动验证

Question

这是我几周前提出的一个问题的后续。

我有两行的滚动框，现在已经进行了验证以防止滚动第一个盒子，但是我很难弄清楚如何在相反方向上做类似的事情，以防止滚动滚动到最后一个方向盒子。

这是从一行处理滚动事件的代码：

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

完整的示例在这里工作：https：//jsfiddle.net/hbd6nl4e/1/

Answer 1

这可能是解决您问题的方法：重新编辑：

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

编辑，现在它正在使用鼠标和指针垫。它不起作用的原因是鼠标和指针垫阵容非常不同：一个是另一个2.5px的100px步骤。现在唯一的问题是Firefox没有处理它，实际上它只是在Chrome上工作。

在这里检查：http：//output.jsbin.com/gobaguhehe