☰

Lock Scroll to Bottom

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

Per 30-05-2025. Zie de nieuwste versie.

Maker
prudentbird
Beoordelingen
0 0 0
Versie
1.1
Gemaakt op
18-05-2025
Bijgewerkt op
30-05-2025
Grootte
1,51 KB
Licentie
MIT
Wordt toegepast op

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