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

HTML5画布元素上的滚动验证

1 个答案: