HTML5 canvas元素上的滚动验证

Question

这是几个星期前我问过的previous 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(); 
} 

已编辑，现在它正在使用鼠标和指针板。它不能正常工作的原因是因为鼠标和指针垫deltaY非常不同：其中一个是100px，另一个是2.5px。现在唯一的问题是，Firefox不处理它，实际上它只适用于Chrome。

入住在这里：http://output.jsbin.com/gobaguhehe