1

私のページには、次のように 5 秒ごとに更新される DIV #alerts_wrapper があります。

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

div の最大高さを 200px に設定し、スクロールを自動にしています。ユーザーがこのdivをスクロールしている場合、divの更新を停止するにはどうすればよいですか? そして、ユーザーがスクロールを停止した場合は、もう一度更新を開始しますか??

ありがとう！

4

3 に答える 3

3

この 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);
于 2012-04-03T21:53:25.517 に答える
2

編集：新しいコードで更新されました。スクロールするときにフラグを設定/リセットするだけでポーリングする必要はありません。

デモ

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 スクロール イベントの単純なポーリングでうまくいきます。デモを見る

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-03T22:02:55.723 に答える
0

これを行うには、ここで概説されているように、カスタム スクロール イベントを実装する必要があると思います: 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);
于 2012-04-03T21:57:00.393 に答える