title: "Hide Web Scrollbars: A Cleaner Browse Experience!"
author: "DuyNguyen2k6"
date: "July 30, 2025" # Update this date if needed
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)!
What does it do?
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.
Key Features:
- Automatic Operation: Install it once, and the script will automatically hide scrollbars on all supported pages.
- Still Scrollable: Most importantly, even with the scrollbars hidden, you can still fully scroll pages using your mouse wheel, trackpad, or standard scrolling gestures.
- Lightweight & Safe: The script is designed to be minimal, focusing solely on the scrollbar hiding function with the least possible conflict with webpages.
Important Notes:
Due to the diverse ways websites are built (especially complex ones like YouTube, Facebook, or large web applications...), this Userscript:
- May not work perfectly: On some pages, scrollbars might still be visible.
- Might affect scrolling: On a small number of pages, the scrolling functionality might be affected, especially if they use custom scroll systems or complex JavaScript.
- Prioritizes Stability: This version prioritizes stability and minimal issues on regular websites, rather than trying to aggressively override every complex scenario (which can sometimes break page layouts).
How to Install (Tampermonkey Required):
- Install Tampermonkey: If you don't have it already, install the Tampermonkey browser extension for your browser (available for Chrome, Firefox, Edge, etc.).
- Create a New Userscript: Click the Tampermonkey icon in your browser's toolbar, then select "Create a new script...".
- Paste the Code: Delete all the default content in the editor and paste the entire userscript code provided below.
- Save: Press
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());
*/
})();
