☰

Scrollbar Hider

Hides scrollbars globally but keeps scrolling functionality

Ajankohdalta 10.9.2024. Katso uusin versio.

// ==UserScript==
// @name         Scrollbar Hider
// @description  Hides scrollbars globally but keeps scrolling functionality
// @author       SSL-ACTX
// @version      1.0.2
// @license      MIT
// @grant        none
// @run-at       document-start
// @match        *://*/*
// @namespace https://greasyfork.org/users/1365732
// ==/UserScript==

(function() {
    'use strict';

    // CSS rules to hide scrollbars but retain scrolling functionality
    const scrollbarHiderCSS = `
        /* Remove WebKit-based browsers' scrollbars */
        *::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        /* Hide scrollbars in Firefox, IE, and Edge */
        * {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
    `;

    // Flag to track if scrollbars are currently hidden
    let scrollbarsHidden = true;

    /**
     * Injects the provided CSS into the document.
     */
    const injectCSS = (cssRules) => {
        const styleElement = document.createElement('style');
        styleElement.id = 'scrollbar-hider-style';
        styleElement.type = 'text/css';
        styleElement.textContent = cssRules;
        document.head.appendChild(styleElement);
    };

    /**
     * Removes the injected CSS.
     */
    const removeCSS = () => {
        const styleElement = document.getElementById('scrollbar-hider-style');
        if (styleElement) {
            styleElement.remove();
        }
    };

    /**
     * Toggles the visibility of scrollbars. Idk, but I think this is important.
     */
    const toggleScrollbars = () => {
        if (scrollbarsHidden) {
            removeCSS();
        } else {
            injectCSS(scrollbarHiderCSS);
        }
        scrollbarsHidden = !scrollbarsHidden;
    };

    /**
     * Adds event listener for keypress to toggle scrollbars.
     */
    const addToggleListener = () => {
        document.addEventListener('keydown', (event) => {
            // Ctrl + Alt + M
            if (event.ctrlKey && event.altKey && event.key === 'M') {
                event.preventDefault();
                toggleScrollbars();
            }
        });
    };

    // Initial setup
    injectCSS(scrollbarHiderCSS);
    addToggleListener();
})();