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);

以下是它的工作原理：

当用户首次滚动时，它将检测并检查在50ms内触发的事件不超过5个，这对于普通鼠标来说是非常不寻常的，但对于触控板则不是。

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

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

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

2 个答案: