DISABLE autoscroll (HOTFIX REQ)

ChatGPT
, ,
1

Autoscroll to bottom of screen (desktop) upon new prompt needs to be an option – coding has become unbearably nauseating.

Please hotfix. I can’t work.

4

I agree.

I normally don’t use AI to code, but when I do use it, I get headaches a lot because of the autoscroll. So, the second it starts to write, I have to scroll up a bit and then wait for it to finish before scrolling down to see the entire piece of code.

I wouldn’t be surprised if it is on their list of things to add to the UI, but for the moment, I would look for some extension that changes this, or create your own.

5

Yesterday it wasn’t autoscrolling, today it is.

This can be hotfixed in a matter of seconds.

6

Oh, that’s odd. It always autoscrolls for me.

1 Like
7

Just use some CSS to disable the streaming.

This issue was raised months ago and I posted some code to fix the issue.

8

I would love to use your solution but I couldn’t find it in your repository. Do you know where I can find it?

9
10

right but this seems pertaining to typing animation, or does it also deal with the autoscroll to the bottom of the page upon a new prompt. e.g., if I’m halfway down in the conversation and send a new message it will automatically scroll me to the bottom.

11

That’s probably something different.

I can look into it a bit later and see if I can come up with a simple solution for you.

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
13

Excellent, much obliged.
I’m glad you taught me how it works, now I’ll have some boiler plate knowledge for future references.

How did you know that they are using react-scroll-to-bottom? Intuition/experience or could you discern it from the code?

14

I just looked at the page source, when I saw the class of the div it looked promising as the root of your issue.

In the Chrome developer console I then just manually edited the class attributes of the two divs and sent a message to the model. When it didn’t immediately jump to the bottom I whipped up a quick userscript to make the same changes automatically when the page loads.

Once you’ve written a few userscripts it will be pretty easy for you to bend pretty much any website layout/behavior to your will.

15

Narly. A thousand thx, the motion sickness is once again non-existent.

Enjoy your day!

16

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.