Scrollbar Hider

Hides scrollbars globally but keeps scrolling functionality

Από την 10/09/2024. Δείτε την τελευταία έκδοση.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey, το Greasemonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Userscripts για να εγκαταστήσετε αυτόν τον κώδικα.

You will need to install an extension such as Tampermonkey to install this script.

Θα χρειαστεί να εγκαταστήσετε μια επέκταση διαχείρισης κώδικα χρήστη για να εγκαταστήσετε αυτόν τον κώδικα.

(Έχω ήδη έναν διαχειριστή κώδικα χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Έχω ήδη έναν διαχειριστή στυλ χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

// ==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 + S
            if (event.ctrlKey && event.key === 's') {
                event.preventDefault(); // Prevent the default action
                toggleScrollbars();
            }
        });
    };

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