jQuery - stop autoscrolling div when hovered

Question

This is a follow-up post to a previous question: jQuery - scroll down every x seconds, then scroll to the top

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

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.

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.

Here is my jQuery and a fiddle to go along with it: http://jsfiddle.net/wR5FY/1/

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 3000);

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

$('#scroller').bind('scroll', function () {
    if (dontScroll == 0) {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(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;
});

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

A couple of notes:

• 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.
• 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.
• 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.

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.

Answer 1

Keep it easier ;) The problem was that you first evaluate wheter dontScroll is zero, then start the timer. When the timer has ended, it doesnt evaluate anymore, whether dontScroll STILL is zero. Just pulled that into your scrollIt function:

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 2000);

function scrollit() {
    if(dontScroll == 0){
        if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
                scrollingUp = 1;     
                $('#scroller').animate({ scrollTop: 0 }, 1000, function() {
                    scrollingUp = 0;    
                });
        } else if(scrollingUp == 0) {
            $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
        }
    }
}

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

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});