0

楽しみのためにちょっとおしゃべりしています

新しいメッセージが読み込まれると、すべてのメッセージを保持するdiv（#chatlist）の一番下までスクロールします。ただし、divのスクロールバー（overflow：auto）を使用すると、下にスクロールしようとします。どうすればこれを回避できますか？

私はこれまで運がなかったので、さまざまなクリックなしの検出方法を試しました

これが私のコードです。間隔は数秒ごとにそれを起動します：

var chatlist = $('#chatlist');

function chatinterval() {
    $.ajax({
        type: "POST",
        url: '/chatinterval.php',
        data: "dbtime=" + latestchat,
        dataType: "json",
        success: function (data) {
            if (data) {
                chatlist.append(data.dbtext);
                latestchat = data.dblatest;
                // this part makes it scroll down
                chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height());
            }
        }
    });
}
4

1 に答える 1

0

mousedownおよびイベントを使用しscrollて、フラグ変数を制御できます (例: clicked)。スクロールバーをクリックしないと起動しないためmouseup、すべてのイベントにタイムアウト (私の例では 5 秒) を設定して、scrollユーザーが手動でスクロールを停止するまで待機することができます。したがって、最終的なコードは次のようになります。

var chatlist = $('#chatlist');

var timer = null;
var clicked = false;

chatlist.on({
    mousedown: function() {
        clicked = true;
    },
    scroll: function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            clicked = false;
        }, 5000);
    }
});

function chatinterval() {
    $.ajax({
        type: "POST",
        url: '/chatinterval.php',
        data: "dbtime=" + latestchat,
        dataType: "json",
        success: function (data) {
            if (data) {
                chatlist.append(data.dbtext);
                latestchat = data.dblatest;
                // this part makes it scroll down
                if (!clicked) {
                    chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height());
                }
            }
        }
    });
}

デモ: http://jsfiddle.net/rkUt9/

于 2012-05-08T20:40:44.877 に答える