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

因此，我使用mouseweel.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);
        }
    });
}

功能激活\鼠标滚轮（）
{
$（文档）.bind（'mousewheel'，函数（事件、增量、增量、增量）
{
if（δ<0）
{
控制台日志（1）；
$（“#postscroller'）.scrollTop（$（“#postscroller'）.scrollTop（）+60）；
}
其他的
{
控制台日志（2）；
$（'#postscroller'）.scrollTop（$（'#postscroller'）.scrollTop（）-60）；
}
});
}

现在我的问题是，当这是在一个触摸板水平滚动启用的计算机上使用时，移动是所有的抖动使其无法使用。因此，这个问题将影响人们使用任何一种水平滚动的笔记本电脑，比如chromebook或macbook

我试过做各种修复，玩Delta，但都没用

我希望这里有人能找到解决办法

---

谢谢。

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

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

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

MouseWheel上的函数（事件、增量、增量、增量） { if（δ<0） { 控制台日志（1）； $（“#postscroller'）.scrollTop（$（“#postscroller'）.scrollTop（）+60）； } 其他的 { 控制台日志（2）； $（'#postscroller'）.scrollTop（$（'#postscroller'）.scrollTop（）-60）； } }); 功能激活_鼠标滚轮（） { $（document.bind（'mouseweel'），u0.throttle（onmouseweel，100）； }

---

我必须自己找到问题的解决方案，经过数小时的尝试和不断创新，我得出了以下结论。当然，您必须对其进行修改，使其与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
            }
        }
    }
}

以下是它的工作原理：

当用户第一次滚动时，它将检测并检查在50毫秒内触发的事件是否不超过5个，这对于普通鼠标来说是非常罕见的，但对于轨迹板来说则不是

还有另外一个部分，它不是为了检测的重要性，而是一个技巧，调用一个函数，就像用户刷卡时一样。如果我不够清楚，请找我，这是一个非常棘手的问题，当然不是一个理想的解决方法

---

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

非常感谢，这非常有效，我只需将550和500的值更改为20，否则滚动速度太慢，李ke每秒1步。这确实有效，很棒的工作人员。我需要等18个小时才能给你奖金。很高兴它成功了！我记得我的个人网站也有同样的问题，我在这个特定的检测上工作了10个多小时，只是为了让它工作。我需要以某种方式发布这个消息，因为我经常看到有人回答g“这个问题没有解决办法”。好吧，我的方法是总是有一个解决办法：）不用担心，我在这里寻求帮助：）这似乎是一个很好的解决办法，但我选择了另一个答案，因为我不想包括另一个库。谢谢。你可以用lodash定制。哦，很好，那很有用。

document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);