DISABLE autoscroll (HOTFIX REQ)

ChatGPT
, ,
12 
// ==UserScript==
// @name         ChatGPT No Scroll
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Stop ChatGPT page from auto-scrolling when sending a new message.
// @author       Jake Elmstedt
// @match        https://chat.openai.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    function modifyDivs() {
        var divs = document.querySelectorAll('[class^="react-scroll-to-bottom"]');
        divs.forEach(function(div) {
            div.className = div.className.replace(/react-scroll-to-bottom/g, 'noscroll');
            div.style.overflowY = 'auto';
        });
    }
    var observer = new MutationObserver(function() {
        modifyDivs();
    });
    observer.observe(document.body, { childList: true, subtree: true });
    modifyDivs();
})();

This will do what you need, I hope this script makes your experience a little better.

Just FYI, if OpenAI changes the layout of the ChatGPT interface, this might stop working.

So, a little explanation of what is happening…

The chat interface uses the Node.js package react-scroll-to-bottom. This package provides a <div> class react-scroll-to-bottom which has the property,

React container that will auto scroll to bottom or top if new content is added and viewport is at the bottom, similar to tail -f . Otherwise, a “jump to bottom” button will be shown to allow user to quickly jump to bottom.

So, what we do is,

  1. Identify any <div> containers in the DOM with a class attribute starting with react-scroll-to-bottom
  2. Change the class attribute to something else, in this case noscroll
  3. Add the style attribute overflowY = 'auto' to the re-classed <div> so it continues to behave as otherwise expected.
2 Likes