jQuery - stop autoscrolling div when hovered
<p>This is a follow-up post to a previous question: <a href="http://stackoverflow.com/questions/13067190/jquery-scroll-down-every-x-seconds-then-scroll-to-the-top">jQuery - scroll down every x seconds, then scroll to the top</a></p>

<p>I have refined the scrip a little further, but am having a little trouble with the last step.</p>

<p>I have a div that automatically 50px at a time until it reaches the bottom, at which point it scrolls to the top and starts again.  I have this working perfectly thanks to the above question and with a little add work.</p>

<p>I need to make all scrolling stop when the div is hovered.  I have done part of this already (there is no incremental scrolling down on hover) but I cannot get the full picture.  The div will still scroll to the top even when hovered.</p>

<p>Here is my jQuery and a fiddle to go along with it: <a href="http://jsfiddle.net/wR5FY/1/" rel="nofollow">http://jsfiddle.net/wR5FY/1/</a></p>

<pre><code>var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 3000);

function scrollit() {
    if(scrollingUp == 0 &amp;&amp; dontScroll == 0) {
        $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
    }
}

$('#scroller').bind('scroll', function () {
    if (dontScroll == 0) {
        if ($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
            scrollingUp = 1;      
            $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
                scrollingUp = 0;    
            });
        }
    }
});


$('#scroller').bind('mouseenter', function() {
    dontScroll = 1;
});

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});
</code></pre>

<p>​
In the fiddle, try hovering the scroller div when the yellow square is visible.  You will see that it scrolls to the top.</p>

<p>A couple of notes:</p>

<ul>
<li>You will notice I have used mouseenter and mouseleave rather than hover and mouseout.  This was the best way I could find to ensure all child elements within the div didn't have an adverse affect.</li>
<li>A potential problem area is the fact that I have binded to the scroll event for my function that scrolls to the top.  I think this might cause some additional problems when a user is manually scrolling through the items, with my jQuery trying to scroll against the user.</li>
<li>I did a little experimenting with killing setInterval, but I didn't find this to be very helpful as the function that triggers isn't the problem area.</li>
</ul>

<p>My overall goal here is to lock down all automatic scrolling when a user is hovering or manually scrolling through the list.  This is 90% there.  If they happen to scroll to the bottom, NOTHING should happen until they move the mouse elsewhere - this is the problem.</p>
