Tasker Webview实现的GPT聊天无法自动滚动，请求排查解决

我通过chat.html文件，在Tasker中使用Webview组件创建了一个GPT聊天应用。目前遇到的问题是聊天区域无法随新消息自动滚动，新消息会隐藏在底部，需手动滚动查看，相关代码如下：

</style>
    <script>
        if (!window["global"]) {
            window["global"] = () => {
                return `[
                    {
                        "role": "user",
                        "content": "hello there how are you"
                    },
                    {
                        "role": "assistant",
                        "content": "Hello! As an AI language model, I don't have emotions in the human sense, but I'm functioning well. How can I assist you today?"
                    }
                ]`;
            }
        }

        const sendChat = () => {
            const inputElement = document.querySelector("#chat_input");
            const chat = inputElement.value;
            console.log("Sending chat", chat);
            performTask("-----AI-----System >> Send Chat", 5, chat);
        }
        const clearChat = () => {
            const inputElement = document.querySelector("#chat_input");
            const conversationElement = document.querySelector("#conversation");
            inputElement.value = "";
            conversationElement.innerHTML = "";
            performTask("-----AI-----System >> Clear Chat", 5);
        }
        if (!window["setClip"]) {
            window["setClip"] = (text) => alert(`Setting clipboard to "${text}"`);
        }

        const getMessages = () => {
            var messagesText = global("%Messages");
            if (!messagesText) {
                messagesText = "[]";
            }
            const messagesObject = JSON.parse(messagesText);
            return messagesObject;
        }
        const setClipboardToMessageIndex = (index) => {
            const messages = getMessages();
            const messageToSetOnClipboard = messages[index];
            if(!messageToSetOnClipboard) return;

            setClip(messageToSetOnClipboard.content);
        }
        const updateMessages = () => {
            const messagesObject = getMessages();
            var html = "";
            var index = 0;
            messagesObject.forEach(message => {
                const isAssistant = message.role == "assistant";
                html += `
    <div class="container${isAssistant ? " darker" : ""}">
        <img src="${isAssistant ? "https://assets.website-files.com/5bd07377b823419565a29426/63ee56ec00064ef3dc4ff13d_ChatGPT_logo.png" : "https://cdn-icons-png.flaticon.com/512/6947/6947573.png"}" class="${isAssistant ? "" : "right"}" alt="Avatar" style="width:100%;">
        <p>${message.content}</p>
        ${isAssistant ? `<div class="copy_button" onclick="setClipboardToMessageIndex(${index})"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ8McyNKbbcml1Joy3U7bBV7I0-7KA-QtpNkQ0PooCmWjd7awaKDKyxluDlrdzpkONN7E&usqp=CAU"></div>` : ""}
    </div>`;
                index++;
            });
            const conversationElement = document.querySelector("#conversation");
            conversationElement.innerHTML = html;
        }
        setInterval(updateMessages, 1000);  
    </script>

问题原因与解决方法 #

问题核心是每次更新聊天内容后，没有触发滚动容器到底部的操作。只需修改updateMessages函数，在渲染完新消息后添加滚动逻辑：

修改后的updateMessages函数：

const updateMessages = () => {
    const messagesObject = getMessages();
    var html = "";
    var index = 0;
    messagesObject.forEach(message => {
        const isAssistant = message.role == "assistant";
        html += `
<div class="container${isAssistant ? " darker" : ""}">
    <img src="${isAssistant ? "https://assets.website-files.com/5bd07377b823419565a29426/63ee56ec00064ef3dc4ff13d_ChatGPT_logo.png" : "https://cdn-icons-png.flaticon.com/512/6947/6947573.png"}" class="${isAssistant ? "" : "right"}" alt="Avatar" style="width:100%;">
    <p>${message.content}</p>
    ${isAssistant ? `<div class="copy_button" onclick="setClipboardToMessageIndex(${index})"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ8McyNKbbcml1Joy3U7bBV7I0-7KA-QtpNkQ0PooCmWjd7awaKDKyxluDlrdzpkONN7E&usqp=CAU"></div>` : ""}
</div>`;
        index++;
    });
    const conversationElement = document.querySelector("#conversation");
    conversationElement.innerHTML = html;
    // 新增：自动滚动到底部
    conversationElement.scrollTop = conversationElement.scrollHeight;
}

说明

• scrollTop设置为容器的scrollHeight，会直接将滚动条定位到容器内容的最底部，确保最新消息始终可见。
• 该方法要求聊天容器（#conversation）必须设置了固定高度且开启了overflow: auto或overflow: scroll样式，否则滚动逻辑不会生效。
• 因为你用setInterval每秒更新一次消息，每次更新后执行滚动操作，就能保证新消息出现时自动滚动到底部。

内容的提问来源于stack exchange，提问作者SamirOnof