javascript – 限制HTML5画布元素上的滚动功能

前端之家收集整理的这篇文章主要介绍了javascript – 限制HTML5画布元素上的滚动功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在画布上绘制了一系列矩形,并使用滚动事件监听器来上下移动框.

我正在尝试添加一些验证,以便框不能滚动超过某一点.

由于加速,滚动值并不总是递增1,因此当快速滚动时,有时我的验证会过早开始.

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

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

lScroll += e.deltaY;

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

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

最佳答案
请检查这是否适合您: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,则表示我们已达到顶部.接下来,我检查第一个框是否应该在哪里.如果不是(即方框[first] [‘y’]< 10)则调整所有方框的y位置.

原文链接:/js/429017.html

猜你在找的JavaScript相关文章