Hides scrollbars on most webpages for a cleaner look. May not work on all complex sites.
title: "Hide Web Scrollbars: A Cleaner Browse Experience!" author: "DuyNguyen2k6"
Hey everyone,
Are you tired of seeing scrollbars constantly cluttering your screen, taking away from the clean look of webpages? If so, I've got a neat and effective solution for you: a simple Userscript for Tampermonkey (or Greasemonkey, Violentmonkey)!
This Userscript automatically hides both vertical and horizontal scrollbars on most websites you visit. The goal is to provide a cleaner, less "cluttered" browser interface, helping you focus on the main content.
Due to the diverse ways websites are built (especially complex ones like YouTube, Facebook, or large web applications...), this Userscript:
Ctrl + S (or Cmd + S on macOS) or save the script via Tampermonkey's menu.After installation, reload your webpages to see the effect!
// ==UserScript==
// @name Hide Scrollbar (Simple)
// @namespace [http://tampermonkey.net/](http://tampermonkey.net/)
// @version 1.1
// @description Automatically hides scrollbars on most webpages for a cleaner look.
// @description This script uses basic CSS to hide browser scrollbars while retaining scrollability.
// @description IMPORTANT NOTES:
// @description - May not work or allow scrolling on some complex sites (e.g., YouTube, Facebook) due to custom scrollbars or special DOM structures.
// @description - Focuses on stability and minimal issues on regular websites.
// @author Your Name
// @match *://*/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
const STYLE_ID = 'userscript-hide-scrollbar-style-simple';
// Function to inject the basic CSS rule for scrollbar hiding
function applyHideScrollbarCss() {
let styleTag = document.getElementById(STYLE_ID);
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = STYLE_ID;
styleTag.textContent = `
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* Hide scrollbar for Firefox */
html, body {
scrollbar-width: none !important;
}
/* Hide scrollbar for Internet Explorer and Edge Legacy */
html, body {
-ms-overflow-style: none !important;
}
`;
document.head.appendChild(styleTag);
}
}
// Function to remove the CSS rule (not strictly needed for this simple version, but good practice)
function removeHideScrollbarCss() {
const styleTag = document.getElementById(STYLE_ID);
if (styleTag) {
styleTag.remove();
}
}
// Apply the CSS on page load
applyHideScrollbarCss();
// Optionally, use a MutationObserver if you find scrollbars reappearing frequently
// This part is commented out to keep it simpler and avoid potential issues,
// but you can uncomment it if needed.
/*
const observer = new MutationObserver((mutations) => {
if (!document.getElementById(STYLE_ID)) {
applyHideScrollbarCss();
}
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
observer.observe(document.documentElement, { attributes: true });
window.addEventListener('unload', () => observer.disconnect());
*/
})();