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

Question

Я создаю эффект прокрутки с помощью 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:... 
    }); 
}); 

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

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

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

Answer 2

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

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

Answer 3

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

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 событие копируется из THIS ответа