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

Question

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

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

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

演示：http: //jsfiddle.net/rkUt9/