Избегайте нервной прокрутки на горизонтальных сенсорных панелях при использовании Nicescroll и mousewheel.js

Поэтому я использую 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.

Я пытался делать различные исправления, играть с дельтами, но безрезультатно.

Я надеялся, что кто-то здесь сможет найти решение.

Благодарю.

Источник

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 событий, что довольно необычно для обычной мыши, но не для трекпада.

Тогда есть другая часть, которая не важна для обнаружения, а скорее хитрость для вызова функции один раз, как когда пользователь проводит пальцем. Пожалуйста, приходите ко мне, если я не был достаточно ясен, было очень сложно заставить это работать, и это, конечно, не идеальный обходной путь.

Изменить: я оптимизировал код сейчас, насколько я могу. Он обнаруживает mouseroll во второй раз и мгновенно проводит по трекпаду. Убрал также много повторяющегося и ненужного кода.

Источник

Событие мышиного колеса срабатывает много раз. Чтобы регулировать событие, чтобы оно не срабатывало так сильно, используйте функцию газа.

https://lodash.com/docs

Поскольку событие не будет запускаться так часто, производительность должна быть лучше.

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);
}
Источник
Другие вопросы по тегам