Отличие между прокруткой пользователя и программной прокруткой с помощью Javascript

Я создаю эффект прокрутки с помощью JQuery, и мне интересно, можно ли отличать прокрутку пользователя от программной прокрутки.

У меня есть что-то вроде этого:

$('#element').on('scroll',function(e){
    $('#element').stop(true); // stop previous scrolling animation
    $('#element').animate({ // start new scrolling animation (maybe different speed, different direction, etc)
        scrollTop:...
    });
});

Однако это событие запускается на каждом шаге анимации. Как я могу узнать, было ли это событие вызвано пользователем или анимацией?

Ответы

Ответ 1

Используйте переменную, чтобы определить, когда вы прокручиваете программно

Пример:

var programScrolling = false;

$('#element').on('scroll',function(e){
    if (programScrolling) {
        return;
    }

    $('#element').stop(true); // stop scrolling animation

    programScrolling = true;

    $('#element').animate({
        scrollTop:...
    });

    programScrolling = false;
});

Не уверен, что это именно то, что вы хотите, но концепция должна работать.

Ответ 2

Я бы выполнял функции для разных видов прокрутки для их обнаружения и вызывал обработчик прокрутки для всех них:

JS Fiddle

$(window).bind('mousewheel DOMMouseScroll', function(event){
    var direction;
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        direction = 'up';
    }
    else {
        direction = 'down';
    }
    scrollHandler(direction, 'mouseWheel');
    event.preventDefault();
});

var scrollHandler = function(direction, origin) {
    var height = $(document).scrollTop();
    var movement = (direction == 'up') ? -100 : 100;
    console.log(origin);
    $('body').stop(true);
    $('body').animate({
        scrollTop: height + movement
    }, 250);
};

Затем вы можете делать разные вещи в соответствии с происхождением события!
Вы также можете проверить, прокручивается ли пользователь в том же направлении, в котором прокручивается экран, и делать что-то другое или что-то еще, что вам нужно, с информацией, переданной событием mousewheel.

Исходная функция события mousewheel, скопированная из ЭТО ответ

Ответ 3

Я бы предположил, возможно, используя метод .originalEvent. Недостатком является то, что это зависит от браузера. См. здесь. Надеюсь, следующее поможет:

$('#element').scroll(function(e){
    var humanScroll = e.originalEvent === undefined;
    if(humanScroll) {
        $(this).stop(true);
    }
})