Lock Scroll to Bottom

Automatically keep the scroll locked to the bottom of the chat container on t3.chat

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Lock Scroll to Bottom
// @namespace    https://github.com/prudentbird
// @version      1.1
// @description  Automatically keep the scroll locked to the bottom of the chat container on t3.chat
// @author       Prudent Bird
// @match        https://t3.chat/*
// @match        https://beta.t3.chat/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=t3.chat
// @grant        none
// @license      MIT
// ==/UserScript==
(function() {
    'use strict';

    function waitForElement(selector, callback) {
        const el = document.querySelector(selector);
        if (el) {
            callback(el);
        } else {
            setTimeout(() => waitForElement(selector, callback), 500);
        }
    }

    waitForElement('div.absolute.inset-0.overflow-y-scroll', (el) => {
        const threshold = 50;
        let autoScrollEnabled = true;

        const scrollToBottom = () => {
            setTimeout(() => {
                el.scrollTop = el.scrollHeight;
            autoScrollEnabled = true;
        }, 0);
        };

        el.addEventListener('scroll', () => {
            const distanceToBottom = el.scrollHeight - el.clientHeight - el.scrollTop;
            autoScrollEnabled = distanceToBottom <= threshold;
        });

        scrollToBottom();

        const observer = new MutationObserver(() => {
            if (autoScrollEnabled) {
                scrollToBottom();
            }
        });

        observer.observe(el, { childList: true, subtree: true });
    });
})();