☰

Lock Scroll to Bottom

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

Від 30.05.2025. Дивіться остання версія.

Автор
prudentbird
Рейтинги
0 0 0
Версія
1.1
Створено
18.05.2025
Оновлено
30.05.2025
Size
1,5 кБ
Ліцензія
MIT
Відноситься до

Lock Scroll to Bottom Userscript

Automatically keeps the chat container on t3.chat locked at the bottom whenever new messages arrive.

Features

  • Auto-scroll: Jumps to the latest message immediately on load.
  • Live updates: Listens for new DOM mutations and re-scrolls in real time.
  • Lightweight: Pure JavaScript, no external dependencies or grants required.

Installation

  1. Install a Userscript manager in your browser (e.g., Tampermonkey or Violentmonkey).

  2. Create a new userscript and paste in the following:

    // ==UserScript==
// @name         Lock Scroll to Bottom
// @namespace    https://github.com/prudentbird
// @version      1.0
// @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 });
   });
})();

  3. Save and enable the script.

  4. Reload or visit t3.chat to see it in action.

Follow me on GitHub: prudentbird