Как отличить прокрутку мышью от программной прокрутки в JavaScript? - PullRequest
Новая
       32

Как отличить прокрутку мышью от программной прокрутки в JavaScript?

8 голосов
/ 24 августа 2011

Я прокручиваю переполненный контент DIV, изменяя свойство scrollLeft в Javascript: 

setInterval(function(){
  $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}, 50);

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

$('#scrollbox').scroll(function(){...});

однако, моя автоматическая прокрутка выше также вызывает это событие. Как я могу различить это и реагировать только на пользовательскую прокрутку? (или: как я могу остановить приведенный выше код от запуска события прокрутки? Это также поможет)

Ответы [ 4 ]

6 голосов
/ 24 августа 2011

Вы можете использовать функцию .hover () : для остановки прокрутки, когда мышь находится над элементом прокрутки:

http://jsfiddle.net/bGHAH/1/

setInterval(function(){
    if(!mouseover)
    {
       $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
    }
}, 50);

var mouseover = false;
$('#scrollbox').hover(function(){
    mouseover = true;
},function(){
    mouseover = false;    
});

Редактировать

На основании ваших комментариев мне удалось найти плагин jquery со следующего сайта: специальные события прокрутки для jquery .

Этот плагин содержит событие, которое пытается определить, остановилась ли прокрутка на основе промежутка времени, прошедшего между последним шагом прокрутки и временем, когда была сделана проверка.

Чтобы заставить это работать, мне нужно было замедлитьваш интервал чуть больше задержки, используемой плагином, который составил 310 миллисекунд.Это означало, что мне пришлось увеличить шаг прокрутки, чтобы он заметно двигался.

Вот ссылка:

http://jsfiddle.net/EWACn/1/

и вот код: 

var stopAutoScroll = false;

$(document).ready(function(){

setInterval(function(){
    if(!stopAutoScroll)
    {
       $('#status').html('scrolling');
       $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10);
    }else{
       $('#status').html('not scrolling');
    }
}, 310);

$('#scrollbox').bind('scrollstart', function(e){
    stopAutoScroll = true;
});

$('#scrollbox').bind('scrollstop', function(e){
    stopAutoScroll = false;
});

});

Надеюсь, это поможет.

2 голосов
/ 24 августа 2011

Для FF (Mozilla):

document.addEventListener('DOMMouseScroll', handler, false);

Для IE, Opera и Chrome:

document.onmousewheel = handler;

0 голосов
/ 12 апреля 2017

Try wheel event , для большинства современных браузеров

Событие колеса вызывается при вращении кнопки управления указательным устройством (обычно мышью).

0 голосов
/ 24 августа 2011

Другой вариант - иметь внешний флаг, который вы можете установить до программной прокрутки, а затем сбросить послесловия.Если событие прокрутки запущено и этот флаг не установлен, вы знаете, что пользователь несет ответственность и может действовать соответственно.

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

...