限制HTML5画布元素的滚动能力

Question

限制HTML5画布元素的滚动能力

javascripthtmlcanvashtml5-canvas

5

我在画布上画了一系列矩形，并使用滚动事件监听器将它们向上和向下移动。

我试图添加一些验证，以便框不能被滚动超过某个点。

由于加速度的影响，滚动值不总是按1递增，因此在快速滚动时，有时我的验证会过早触发。

有什么解决方法吗？

所以，在我的事件监听器中，我有以下代码：

lScroll += e.deltaY;

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

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

- Adam Lobo

也许你可以使用 getBoundingClientRect()？ - fnune

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BitParser · Accepted Answer

请检查一下这个链接是否可以使用：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 位置。