Hides scrollbars globally but keeps scrolling functionality
As of
// ==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();
})();