限制HTML5畫布元素上的滾動功能

Question

我在畫布上繪制了一系列矩形，並使用滾動事件監聽器來上下移動框。

我正在嘗試添加一些驗證，以便框不能滾動超過某一點。

由於加速，滾動值並不總是遞增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位置。