0

我正在聊天,只是为了好玩

加载新消息时,它会滚动到包含所有消息的 div (#chatlist) 的底部。但是当我使用 div 的滚动条(溢出:自动)时,它也会尝试向下滚动。我怎样才能避免这种情况?

我尝试了各种无点击检测方法,到目前为止没有运气

这是我的代码。间隔每隔几秒触发一次:

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

您可以使用mousedownscroll事件来控制标志变量(例如clicked)。由于mouseup在您取消单击滚动条时不会触发,我们可以在每个scroll事件上设置超时(在我的示例中为 5 秒),以等待用户手动停止滚动。所以最终的代码应该是这样的:

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 回答