javascript - 使用 Nicescroll 和 mousewheel.js 时避免水平触摸板上的抖动滚动

Question

因此，我使用 mousewheel.js 来处理文档任何部分中的鼠标滚轮滚动，以便我可以滚动由 Nicescroll 制作的自定义滚动条。

You can check a fiddle of it working here

这是处理滚动的部分代码:

function activate_mousewheel()
{
    $(document).bind('mousewheel', function(event, delta, deltaX, deltaY) 
    {
        if(delta < 0)
        {
            console.log(1);
            $('#postscroller').scrollTop($('#postscroller').scrollTop() + 60);
        }
        else
        {
            console.log(2);
            $('#postscroller').scrollTop($('#postscroller').scrollTop() - 60);
        }
    });
}

现在我的问题是，当在启用了水平滚动的触摸板的计算机中使用它时，移动会变得非常不稳定，使其无法使用。因此，这个问题将影响使用任何具有水平滚动功能的笔记本电脑(例如 chromebook 或 macbook)的人们。

我尝试过进行各种修复，使用增量，但无济于事。

我希望这里有人能找到解决方案。

谢谢。

Answer 1

我必须自己找到问题的解决方案，经过几个小时的尝试和创造性，我想出了这个办法。当然，你必须修改它以将其集成，以便与 NiceScroll 等顺利工作，因为这是纯 JS:

好吧，我需要找到一个解决方案。所以我找到了一个可以接受的解决方案来解决这个问题:

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) {
        // here 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);

其工作原理如下:

当用户第一次滚动时，它会检测并检查在 50 毫秒内触发的事件不超过 5 个，这对于普通鼠标来说很不寻常，但对于触控板来说则不然。

然后是 else 部分，这对于检测来说并不重要，而是一个像用户滑动时一样调用一次函数的技巧。如果我不够清楚，请来找我，让这个工作非常棘手，当然这不是一个理想的解决方法。

编辑:我现在尽可能地优化了代码。它第二次检测到鼠标滚轮并立即在触控板上滑动。还删除了很多重复和不必要的代码。