I am scrolling an overflowing DIV's content by changing the scrollLeft property in Javascript:

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

However, I want to stop this as soon as the user scrolls the content themselves, using the mouse. I tried to detect this using the scroll event

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

however, my automatic scrolling above also triggers that event. How can I distinguish this and only react to user-initiated scrolling? (or: how can I stop the above code from firing a scroll event? That would also do the trick)

I am scrolling an overflowing DIV's content by changing the scrollLeft property in Javascript:

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

However, I want to stop this as soon as the user scrolls the content themselves, using the mouse. I tried to detect this using the scroll event

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

however, my automatic scrolling above also triggers that event. How can I distinguish this and only react to user-initiated scrolling? (or: how can I stop the above code from firing a scroll event? That would also do the trick)

• javascript
• jquery
• scroll
• jquery-events

Share Improve this question Follow edited Apr 8, 2020 at 14:07 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 24, 2011 at 16:19 travelboytravelboy 2,69733 gold badges2828 silver badges3737 bronze badges 2

• Could you check if the users mouse is over the div being scrolled since most browsers only scroll div's when the user has clicked in the div. This wouldn't be full proof though, since your event could trigger when he is hovering over the div. – Adam Magaluk Commented Aug 24, 2011 at 16:45
• It's not practical since the DIV fills the whole client area. Moreover, Mac-users scroll with two fingers (without clicking). – travelboy Commented Aug 24, 2011 at 17:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You could use the .hover(): function to stop the scrolling when the mouse is over the scrollbox element:

http://jsfiddle/bGHAH/1/

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

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

---

Edit

Based on your ments I managed to find a jquery plugin from the following site: special scroll events for jquery.

This plugin contains an event which attempts to determine whether scrolling has stopped based on the period of time that has elapsed between the last scroll step and the time the check was made.

To get this to work I needed to slow your interval to just over the latency used by the plugin which worked out to be 310 milliseconds. Doing this meant I had to increase the scroll step to keep it visibly moving.

Here is the link:

http://jsfiddle/EWACn/1/

and here is the code:

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

});

Hope this helps.

For FF (Mozilla):

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

For IE, Opera and Chrome:

document.onmousewheel = handler;

Another option is to have an external flag that you can set prior to the programmatic scrolling, and then reset afterwords. If the scroll event is fired and this flag isn't set you know that the user is responsible and can act accordingly.

Unfortunately while this is browser independent and easy to read it could lead you to believe that some user scrolls are programmatic ones. However I would think the occurrences of this is small and may be worth it depending on the app you are writing.

Try wheel event, for most modern browsers

The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated.