How to hide every scrollbar at once with injected CSS (kepping the element scrollable)

Question

EDITED

I'd like to hide every single scrollbar inside webpages, keeping each scrollable element always scrollable.

I'm working on an injected Javascript file, which adds a style element into every webpage that I visit, but some pages have more than one scrollbar and my tag can't style all of them.

Injected script:

const styleTag = document.createElement("style")

styleTag.textContent = `

    ::-webkit-scrollbar {
        appearance: none !important;
        width: 0;
        height: 0;
    }
`

document.head.appendChild(styleTag)

The user @Yogi found out the problem:

Your css works fine on default scrollbars. It doesn't work on elements where the page is already styling the scrollbar. For example, the electron page applies style .thin-scrollbar::-webkit-scrollbar within a media query. Consequently, your css is ignored even if you apply important.

A Minimal, Reproducible Example

.container {
  display: flex;
  gap: 1rem;
}

.box {
  box-sizing: border-box;
  padding: 0.5rem;
  overflow: scroll;
  height: 20rem;
  max-height: 100%;
  border: thin solid black;
}

.spacer {
  height: 50rem;
  width: 50rem;
}

@media(pointer:fine) {
  .thin-scrollbar {
    scrollbar-width: thin;
  }
  .thin-scrollbar::-webkit-scrollbar:horizontal {
    /* placeholder */
  }
  .thin-scrollbar::-webkit-scrollbar:vertical {
    /* placeholder */
  }
}

::-webkit-scrollbar {
  appearance: none !important;
  width: 0;
  height: 0;
}

<div class="container">
  <div class="box">
    OK - scrollbars hidden<br> 
    This box has default scrollbars
    <div class="spacer"></div>
    Bottom
  </div>
  <div class="box thin-scrollbar">
    FAIL - scrollbars visible<br> 
    This box uses a styled scrollbar
    <div class="spacer"></div>
    Bottom
  </div>
</div>

So, I need that my style tag can overwrite the "already styled scrollbars" in the page, too. Does someone know how to make my injected CSS the most important of the document?

Answer 1

SOLUTION FOR ELECTRON PROJECTS

I just found a simple solution to hide ALL native scrollbars inside webpages, but this only works on Electron projects. I recently discovered the List of Chromium Command Line Switches, which contains a very useful Switch for my purpose:

--hide-scrollbars

(link to specific section: https://peter.sh/experiments/chromium-command-line-switches/#hide-scrollbars)

Here is an example of how to use it in code:

    // inside Electron main process (main.js)

    const { app, ... } = require("electron")

    // call this method before app is ready
    app.commandLine.appendSwitch("hide-scrollbars")

    app.whenReady().then(() => {

        //...
    }

I hope this can be useful!