0

所以我使用 mousewheel.js 来处理文档任何部分的鼠标滚轮滚动，这样我就可以滚动 Nicescroll 制作的自定义滚动条。

你可以在这里检查它的工作原理

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

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。

我尝试过各种修复，使用 deltas 但无济于事。

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

谢谢。

4

2 回答 2

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);
}
于 2015-10-22T15:03:04.237 回答
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 部分，这不是为了检测的重要性，而是像用户滑动一样调用一次函数的技巧。如果我不够清楚，请来找我，让这个工作非常棘手，当然这不是一个理想的解决方法。

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

于 2015-10-22T15:07:44.817 回答