CSS Script only works when page is reloaded

[marlonjames71]

I have a CSS script for hiding scrollbars only on YouTube's website, but it never works when the page first loads or when I click on different videos. Only when I refresh the page. Can anyone suggest what I should do to get this to work reliably the first time it loads and for any video I click on without having to reload every time?

Here's the very simple script:

/* ==UserStyle==
@name        Hide YT Scrollbar
@description Hides the scrollbar on YouTube
@match        *://*.youtube.com/*
@exclude      *://music.youtube.com/*
@exclude      *://*.music.youtube.com/*
==/UserStyle== */

body::-webkit-scrollbar { width: 0px; !important; }

[ACTCD]

There's a syntax error there, an extra semicolon.

body::-webkit-scrollbar { width: 0px !important; }

Also due to #711, it is recommended to use .user.js instead of .css.
The custom ==UserStyle== support will be deprecated in the future.

[marlonjames71]

So, like this?

// ==UserScript==
// @name        Hide YT Scrollbar
// @description Hides the scrollbar on YouTube
// @match        *://*.youtube.com/*
// @exclude      *://music.youtube.com/*
// @exclude      *://*.music.youtube.com/*
// ==/UserScript==

body:-webkit-scrollbar { width: 0px; !important; }

[marlonjames71]

That still didn't work, but I asked AI and it gave me this which seems to work:

// ==UserScript==
// @name        Hide YT Scrollbar
// @description Hides the scrollbar on YouTube
// @match        *://*.youtube.com/*
// @exclude      *://music.youtube.com/*
// @exclude      *://*.music.youtube.com/*
// @connect      youtube.com
// ==/UserScript==

(function() {
    'use strict';

    // Create a style element
    const style = document.createElement('style');
    style.type = 'text/css';

    // Add CSS to hide the scrollbar
    style.innerHTML = `
        body::-webkit-scrollbar { 
            width: 0 !important; 
            height: 0 !important;
        }
        body {
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    `;

    // Append the style to the head
    document.head.appendChild(style);
})();

[ACTCD]

So, like this?

No, I said an extra semicolon, not a colon. The !important should not be preceded by a semicolon, otherwise it will not work.

[ACTCD]

So the final script should be:

// ==UserScript==
// @name           Hide YT Scrollbar
// @description    Hides the scrollbar on YouTube
// @match          *://*.youtube.com/*
// @exclude-match  *://music.youtube.com/*
// @exclude-match  *://*.music.youtube.com/*
// @inject-into    content
// @grant          GM.addStyle
// @run-at         document-start
// ==/UserScript==

GM.addStyle(`body::-webkit-scrollbar { width: 0 !important; }`);

NOTE that you should use @exclude-match instead of @exclude.

[marlonjames71]

Oh I see. Totally misread that. I will give that a shot. Thanks for your help!

[marlonjames71]

Works perfectly. Thanks again!