限制HTML5画布元素的滚动功能 [英] Limit scroll ability on HTML5 canvas elements

问题描述

我有一系列在画布上绘制的矩形，并使用滚动事件监听器来上下移动框。

I've got a series of rectangles drawn on a canvas and use a scroll event listener to move the boxes up and down.

我试图添加

由于加速度，滚动值不总是递增1，因此当快速滚动时

Due to the acceleration, the scroll values don't always increment by 1, so when scrolling quickly, sometimes my validation kicks in too early.

任何想法如何解决这个问题？

Any ideas how to solve this?

listener我有：

So in my event listener I have:

lScroll += e.deltaY;

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

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

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

推荐答案

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

Please check if this is working for you: https://jsfiddle.net/kr85k3us/4/

我测试了它，它应该可以工作，但也许你可以更快地移动你的摩丝轮：）

I tested it and it should work, but perhaps you can move your mousewheel faster :)

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 位置。

This is the piece of code I added. If you can't scroll and lScroll is 0, it means that we reached the top. Next, I check if the first box is where it should be. If not (i.e. boxes[first]['y'] < 10) then it adjusts all the boxes' y position.

这篇关于限制HTML5画布元素的滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！