php - JQuery - Ajax - 滚动和 setInterval

Question

我有滚动和 setInterval 的问题。

这是代码：

function displayChat(){
    $.ajax({
        url: 'chat/fetch_chat.php',
        type: 'POST',
        async: false,
        data:{
            fetch: 1,
        },
        success: function(response){
            $("#chat_area").html(response);
            $("#chat_area").scrollTop($("#chat_area")[0].scrollHeight);
        }
    })
};
setInterval(displayChat, 1000);

插入新数据时，带有“chat_area” id的 div 区域将自动向下滚动。但是当我试图向上滚动时，它会迫使“chat_area”再次向下滚动。我知道这是因为setInterval。

任何人都可以帮助我吗？

标签： phpjqueryajax

Answer 1

const chart = $("#chat_area");

setInterval(displayChat, 1000);

function displayChat() {

    $.ajax({
        url: 'chat/fetch_chat.php',
        type: 'POST',
        async: false,
        data: {
            fetch: 1,
        },
        success: function(response) {
            chart.html(response).trigger('ajaxUpdate');
        }
    })
};


$(() => {

    chart.one('ajaxUpdate', '', (event) => {
        event.target.scrollIntoView({
            behavior: "smooth",
            block: "center",
            inline: "start"
        });
    })

});