Recently, I encountered a scrolling problem on ChatGPT web like this. I don’t use any userscript or extensions for OpenAI’s products and this problem occors in my unhardened Chrome based browser which I do not want to switch from.

Based on the workaround in the threads, I made an userscript out of it which solves the problem by running in tampermonkey.

(function () {
  document.querySelectorAll('html *').forEach(function(node) {
  var s = getComputedStyle(node);
  if (s['overflow'] === 'hidden') { node.style['overflow'] = 'visible'; }
  });
})();

However, this script stopped working just a few days after, and I couldn’t fix it since something in the server-end must have changed.

So I decided to create a new one. But I don’t known how to code javascripts, have to let AI helping me.

After I F(12)igured out what causing the issue in the current html, I send ChatGPT my prompt:

write a userscript for chatgpt.com, solving the missing scrollbar on the right side of the webpage. the reason of this problem is caused by the div class "flex-1" followed with "overflow-hidden". the main task of this scripts is changing it to "overflow-visible". the original html code is this:

<main class="relative h-full w-full flex-1 overflow-auto transition-width"><div role="presentation" class="composer-parent flex h-full flex-col focus-visible:outline-0" tabindex="0"><div class="flex-1 overflow-hidden"><div class="h-full"><div class="react-scroll-to-bottom--css-qvthp-79elbk h-full"><div class="react-scroll-to-bottom--css-qvthp-1n7m0yu"><div class="flex flex-col text-sm md:pb-9">

the desired code is this:

<main class="relative h-full w-full flex-1 overflow-auto transition-width"><div role="presentation" class="composer-parent flex h-full flex-col focus-visible:outline-0" tabindex="0"><div class="flex-1 overflow-visible"><div class="h-full"><div class="react-scroll-to-bottom--css-qvthp-79elbk h-full"><div class="react-scroll-to-bottom--css-qvthp-1n7m0yu"><div class="flex flex-col text-sm md:pb-9">

Then this is what I get from the AI, and it works as expected:

You can solve the missing scrollbar issue by writing a simple user script that changes the `overflow-hidden` to `overflow-visible` dynamically when the page loads. You can use a browser extension like Tampermonkey or Greasemonkey to run the script on the website.

Here's the user script:

javascript
// ==UserScript==
// @name         Fix Missing Scrollbar
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Fixes missing scrollbar on chatgpt.com by changing overflow-hidden to overflow-visible
// @author       Your Name
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to update the class overflow-hidden to overflow-visible
    function fixScrollbar() {
        const elements = document.querySelectorAll('.flex-1.overflow-hidden');
        elements.forEach((el) => {
            el.classList.remove('overflow-hidden');
            el.classList.add('overflow-visible');
        });
    }

    // Run the function after the DOM content is fully loaded
    window.addEventListener('load', function() {
        fixScrollbar();
    });

    // Optional: Observe for future changes in case dynamic content is loaded
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            fixScrollbar();
        });
    });

    // Start observing the body for DOM changes
    observer.observe(document.body, { childList: true, subtree: true });
})();


### How this works:
- The script runs on every page of `chatgpt.com` (`@match https://chatgpt.com/*`).
- It selects elements with the class `flex-1 overflow-hidden`, and changes the `overflow-hidden` class to `overflow-visible`.
- The script uses a `MutationObserver` to watch for changes to the DOM, so the scrollbar fix remains even if new content is dynamically loaded.

### Instructions:
1. Install a user script manager like **Tampermonkey** or **Greasemonkey** in your browser.
2. Create a new script and paste the code above.
3. Save the script and reload the webpage.

This should fix the missing scrollbar issue on the website.

It took me a few attempts to get the right direction, but far eaiser than learning how to write javascript.

When I was doing my repair shop many years ago, I used to make joke that you can’t fix it if your only soldering iron is broken.

But it seems that I can fix my broken ChatGPT with itself : )