Disable auto refresh on div if user is scrolling (JQuery)

Go To StackoverFlow.com

1

I've got a DIV #alerts_wrapper on my page that is being refreshed every 5 seconds like this:

refresh_alerts = setInterval(function () {
    $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container' );
}, 5000); 

I've got a max-height on the div set to 200px, and scrolling to auto. How can I stop the div from refreshing if the user if scrolling on this div? And then if the user stops scrolling, start refreshing again??

Thanks!

2012-04-03 21:43
by DobotJr


2

Edit: Updated with new code, no need for polling just set/reset the flag when u scroll.

DEMO

var isScrolling = false;
$(function() {

    $('#scrollingDiv').on('scroll', function() {
        isScrolling = true;
    });

    refreshTimer = setInterval(refreshContent, 5000);

    function refreshContent() {
        if (!isScrolling) {
            $('#scrollingDiv').prepend('Latest Content <br />');//test code
            //$('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container');            
        }
        isScrolling = false;
    }

});

---------- Old post ----------

A simple polling on div scroll event will do the trick. See DEMO

var isScrolling = false;
var refreshTimer = null;
$(function() {

    $('#scrollingDiv').on('scroll', function() {
        isScrolling = true;
        if (refreshTimer != null) {
            clearInterval(refreshTimer);
            refreshTimer = null;
        }
    });

    //polling to see if still scrolling
    var pollScrolling = setInterval(function() {
        isScrolling = false;

        if (refreshTimer == null) {
            refreshTimer = setInterval(refreshContent, 5000);
        }    
    }, 500);

    //initialize timer
    refreshTimer = setInterval(refreshContent, 5000);

    function refreshContent() {
        if (!isScrolling) {
            $('#scrollingDiv').prepend('Latest Content <br />');
            //$('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container');            
        }
    }

});
2012-04-03 22:02
by Selvakumar Arumugam
Thanks. +1 for demo and no extra plugin requirements - DobotJr 2012-04-03 22:17
@DobotJr Please see the updated code which doesn't require any polling - Selvakumar Arumugam 2012-04-03 22:17
Okay. Thanks for your help - DobotJr 2012-04-03 22:31


3

Use this Jquery plugin: scroll-startstop.events.jquery

Using the above mentioned plugin, you now have access to scrolling events, like this:

$('#yourdiv').bind('scrollstart', function(){
    //user is scrolling
});
$('#yourdiv').bind('scrollstop', function(){
    //user has finished scrolling
});

Use this in conjunction with a bool flag to know when to refresh the div.

Your final code should look something like this:

var isScrolling = false;

$('#yourdiv').bind('scrollstart', function(){
    isScrolling = true;
});
$('#yourdiv').bind('scrollstop', function(){
    isScrolling = false;
});

refresh_alerts = setInterval(function () {
    if (!isScrolling){
        $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container' );
    }
}, 5000); 
2012-04-03 21:53
by xbonez


0

To do this, I think you'll need to implement custom scroll events as outlined here: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

Then you can create a global variable (or even better, in a closure with the interval code), let's call it var isScrolling = false. Create handlers for scrollstart and scrollstop:

jQuery(div).on( 'scrollstart', function( ) {
    isScrolling = true;
} );
jQuery(div).on( 'scrollstop', function( ) {
    isScrolling = false;
} );

Finally, check in your interval for the scrolling flag:

refresh_alerts = setInterval(function () {
    if( !isScrolling ) {
        $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container' );
    }
}, 5000); 
2012-04-03 21:57
by Ryan P
incredible coincidence or did you just copy my code - xbonez 2012-04-03 21:59
@xbonez Coincidence; I started my answer before yours was posted. Simple problem, simple pattern - Ryan P 2012-04-04 00:29