☰

Scrollbar Hider

Hides scrollbars globally but keeps scrolling functionality

  1. // ==UserScript==
  2. // @name         Scrollbar Hider
  3. // @description  Hides scrollbars globally but keeps scrolling functionality
  4. // @author       SSL-ACTX
  5. // @version      1.1.0
  6. // @license      MIT
  7. // @grant        none
  8. // @run-at       document-start
  9. // @match        *://*/*
  10. // @namespace https://greasyfork.org/users/1365732
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // CSS rules to hide scrollbars but retain scrolling functionality
  17.     const scrollbarHiderCSS = `
  18.         /* Remove WebKit-based browsers' scrollbars */
  19.         *::-webkit-scrollbar {
  20.             width: 0;
  21.             height: 0;
  22.         }
  23.  
  24.         /* Hide scrollbars in Firefox, IE, and Edge */
  25.         * {
  26.             scrollbar-width: none;
  27.             -ms-overflow-style: none;
  28.         }
  29.     `;
  30.  
  31.     // Key combination to toggle scrollbars (default: Ctrl + Alt + M)
  32.     const TOGGLE_KEY_COMBINATION = {
  33.         ctrlKey: true,
  34.         altKey: true,
  35.         key: 'm'  // Key to toggle (lowercase, but we'll handle both cases)
  36.     };
  37.  
  38.     // Flag to track if scrollbars are currently hidden
  39.     let scrollbarsHidden = false;
  40.  
  41.     /**
  42.      * Injects the provided CSS into the document.
  43.      */
  44.     const injectCSS = (cssRules) => {
  45.         try {
  46.             const styleElement = document.createElement('style');
  47.             styleElement.id = 'scrollbar-hider-style';
  48.             styleElement.type = 'text/css';
  49.             styleElement.textContent = cssRules;
  50.             document.head.appendChild(styleElement);
  51.         } catch (error) {
  52.             console.error('Failed to inject CSS:', error);
  53.         }
  54.     };
  55.  
  56.     /**
  57.      * Removes the injected CSS.
  58.      */
  59.     const removeCSS = () => {
  60.         try {
  61.             const styleElement = document.getElementById('scrollbar-hider-style');
  62.             if (styleElement) {
  63.                 styleElement.remove();
  64.             }
  65.         } catch (error) {
  66.             console.error('Failed to remove CSS:', error);
  67.         }
  68.     };
  69.  
  70.     /**
  71.      * Toggles the visibility of scrollbars.
  72.      */
  73.     const toggleScrollbars = () => {
  74.         if (scrollbarsHidden) {
  75.             removeCSS();
  76.         } else {
  77.             injectCSS(scrollbarHiderCSS);
  78.         }
  79.         scrollbarsHidden = !scrollbarsHidden;
  80.         // Save preference in localStorage
  81.         localStorage.setItem('scrollbarsHidden', scrollbarsHidden);
  82.     };
  83.  
  84.     /**
  85.      * Adds event listener for keypress to toggle scrollbars.
  86.      */
  87.     const addToggleListener = () => {
  88.         document.addEventListener('keydown', (event) => {
  89.             if (event.ctrlKey === TOGGLE_KEY_COMBINATION.ctrlKey &&
  90.                 event.altKey === TOGGLE_KEY_COMBINATION.altKey &&
  91.                 (event.key === TOGGLE_KEY_COMBINATION.key || event.key === TOGGLE_KEY_COMBINATION.key.toUpperCase())) {
  92.                 event.preventDefault();
  93.                 toggleScrollbars();
  94.             }
  95.         });
  96.     };
  97.  
  98.     // Initialize the script
  99.     scrollbarsHidden = localStorage.getItem('scrollbarsHidden') === 'true';
  100.     if (scrollbarsHidden) {
  101.         injectCSS(scrollbarHiderCSS);
  102.     }
  103.     addToggleListener();
  104. })();