javascript - 限制 HTML5 canvas 元素的滚动能力

Question

我在 Canvas 上绘制了一系列矩形，并使用滚动事件监听器上下移动框。

我正在尝试添加一些验证，这样方框就不会滚动超过某个点。

由于加速，滚动值并不总是递增 1，因此当快速滚动时，有时我的验证启动得太早。

有什么解决办法吗？

所以在我的事件监听器中我有:

lScroll += e.deltaY;

if (lScroll > 0) {
    canScroll = false;
    lScroll = 0;
} else {
    canScroll = true;
}

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

Answer 1

请检查这是否适合您:https://jsfiddle.net/kr85k3us/4/

我测试了它，它应该可以工作，但也许你可以更快地移动你的鼠标滚轮 :)

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

这是我添加的代码。如果你不能滚动和 lScroll为0，表示我们到达了顶部。接下来，我检查第一个框是否在它应该在的位置。如果不是(即 boxes[first]['y'] < 10 )，则它会调整所有框的 y位置。