Question

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

当加载新消息时，它会滚动到包含所有消息的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());
            }
        }
    });
}

Answer 1

您可以使用mousedown和scroll事件来控制标记变量（例如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());
                }
            }
        }
    });
}

DEMO： http://jsfiddle.net/rkUt9/

单击/使用滚动条时，防止滚动顶部（到底部）

1 个答案: