如果用户正在滚动（JQuery），则禁用 div 上的自动刷新答案

【问题标题】：Disable auto refresh on div if user is scrolling (JQuery)如果用户正在滚动（JQuery），则禁用 div 上的自动刷新
【发布时间】：2012-04-17 14:45:14
【问题描述】：

我的页面上有一个 DIV #alerts_wrapper，每 5 秒刷新一次，如下所示：

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

我将 div 的最大高度设置为 200 像素，并滚动到自动。如果用户在此 div 上滚动，如何阻止 div 刷新？然后如果用户停止滚动，重新开始刷新？？

谢谢！

【问题讨论】：

标签： php jquery css scroll refresh

【解决方案1】：

使用这个 Jquery 插件：scroll-startstop.events.jquery

使用上述插件，您现在可以访问滚动事件，如下所示：

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

将此与 bool 标志结合使用以了解何时刷新 div。

您的最终代码应如下所示：

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

【讨论】：

【解决方案2】：

为此，我认为您需要实现此处所述的自定义滚动事件：http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

然后你可以创建一个全局变量（或者更好，在一个带有区间代码的闭包中），我们称之为var isScrolling = false。为scrollstart 和scrollstop 创建处理程序：

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

最后，检查滚动标志的间隔：

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

【讨论】：

@xbonez 巧合；在您发布之前，我就开始了我的回答。简单的问题，简单的模式。

【解决方案3】：

编辑：更新了新代码，滚动时无需轮询只需设置/重置标志。

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

});

---------旧帖----------

对 div 滚动事件进行简单的轮询就可以解决问题。见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');            
        }
    }

});

【讨论】：

谢谢。 +1 演示，没有额外的插件要求。
@DobotJr 请查看不需要任何轮询的更新代码。