使用 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

鼠标滚轮事件触发了很多次。因此，要调节事件，使其不会触发太多，请使用节流功能。

https://lodash.com/docs#throttle

因为事件不会经常触发，所以性能应该更好。

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

function activate_mousewheel()
{
    $(document).bind('mousewheel', _.throttle(onMouseWheel, 100);
}

Answer 2

我必须自己找到解决问题的办法，经过数小时的尝试和发挥创意，我想出了这个办法。当然，您必须修改它以将其集成以与 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 部分，它不是为了检测的重要性，而是 像用户滑动时调用一次函数的技巧 。如果我不够清楚，请来找我，让这个工作非常棘手，当然是一个不太理想的解决方法。

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

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

Avoid jittery scrolling on horizontal touchpads when using Nicescroll and mousewheel.js

javascript

jquery

mousewheel

nicescroll