11

我创建了一个网站，用户可以使用鼠标滚动或向上/向下箭头滚动浏览画廊。它像我想要的那样工作，并在使用鼠标滚动时更改一个图像 pr 滚动。但是，如果用户使用触控板滚动，几乎不可能一次滚动单个图像。

所以我的问题是：有没有办法检查用户是否正在通过触控板滚动，然后改变滚动行为，使其变得不那么敏感，从而更容易一次滚动单个图像？

我不太擅长 jquery，到目前为止，我的解决方案是由几个脚本组合而成的：

http://jsfiddle.net/MukuMedia/PFjzX/33/

希望可以有人帮帮我 ：）

4

5 回答 5

6

我发现这里的神奇数字是 40。

似乎使用触控板（可能也使用魔术鼠标），增量增加了 40 倍。

即使您收回普通鼠标并稍后滚动它，它也会保持这种状态。

所以我做了什么，使用jquery mousewheel 插件：

b.mousewheel(function(evt,delta,deltaX,deltaY){
    if(Math.abs(deltaY)>=40)
        deltaY/=40;
    if(Math.abs(deltaX)>=40)
        deltaX/=40;

    //Do your stuff here.
});
于 2013-05-22T15:43:26.237 回答
4

不，这是不可能的。我能想到的唯一解决方案是限制滚动速度。我不会尝试破译您的代码，但我建议您将timedOut变量初始化为零，每次滚动到新图像时将其设置为 1。setTimeout()在 50 毫秒后使用 a将其设置回零。在滚动到新图像之前，请检查此timedOut变量并仅在它为零时滚动。（确保你把你setTimeout的支票放在里面timedOut，否则每次鼠标滚轮移动时都会不断地调用它，这不是你想要的。）

于 2012-09-18T22:55:15.683 回答
1

这几乎就是 DC_ 所建议的。想我会发布这个，因为它是一个实际的实现。

// similar to _.debounce, but was having issues with it, so I made this.
function rateLimit(func, time){
        var callback = func,
                waiting = false,
                context = this;
        var rtn = function(){
            if(waiting) return;
            waiting = true;
            var args = arguments;
            setTimeout(function(){
                waiting = false;
                callback.apply(context, args);
            }, time);
        };
        return rtn;
    }

    function onWheel(e){
      // Add your code here
    }

    // will only fire a maximum of 10 times a second
    var debouncedOnWheel = rateLimit(onWheel, 100);
    window.addEventListener("wheel", debouncedOnWheel);
于 2014-01-10T18:49:13.907 回答
0

我创建的“section-change”插件遇到了类似的问题。我结束了用“动画”变量解决它：轮子动作只有在这个变量设置为“假”时才有效，一旦触发，变量切换到“真”，然后我会将变量切换回“假”一次动画完成。希望这可以帮助！

于 2013-04-12T07:25:49.107 回答
0

我找到了一个解决方案，可以检测用户是否使用触摸板。它工作得很好，只有两个小缺点。

首先，它在第一次触发事件后检测到鼠标滚动，因此单击鼠标滚轮什么也不做。但这只是第一次。然后我们可以缓存导致第二个小问题的值。当用户拥有触控板和带滚轮的鼠标时，它会检测到首先使用的内容。对我来说，这些问题可以忽略不计。这里的代码

var scrolling = false;
var oldTime = 0;
var newTime = 0;
var isTouchPad;
var eventCount = 0;
var eventCountStart;

var mouseHandle = function (evt) {
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined";
    console.log(isTouchPadDefined);
    if (!isTouchPadDefined) {
        if (eventCount === 0) {
            eventCountStart = new Date().getTime();
        }

        eventCount++;

        if (new Date().getTime() - eventCountStart > 50) {
                if (eventCount > 5) {
                    isTouchPad = true;
                } else {
                    isTouchPad = false;
                }
            isTouchPadDefined = true;
        }
    }

    if (isTouchPadDefined) { // in this if-block you can do what you want
        // i just wanted the direction, for swiping, so i have to prevent
        // the multiple event calls to trigger multiple unwanted actions (trackpad)
        if (!evt) evt = event;
        var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;

        if (isTouchPad) {
            newTime = new Date().getTime();

            if (!scrolling && newTime-oldTime > 550 ) {
                scrolling = true;
                if (direction < 0) {
                    // swipe down
                } else {
                    // swipe up
                }
                setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500);
            }
        } else {
            if (direction < 0) {
                // swipe down
            } else {
                // swipe up
            }
        }
    }
}

document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);
于 2015-07-02T22:05:08.567 回答