Hide scroll bar, while still being able to scroll
Matthew C.
—The Problem
You want to hide a page or page element scrollbar while still allowing scrolling; how do you do this? You may want to do this to improve the UI of a page. The page may not need a scrollbar to indicate that a user can scroll down, for example, a gallery of images with a scroll-down indicator icon.
You should try to avoid hiding scrollbars if possible. Hiding a scrollbar is not a good idea in terms of accessibility. Instead of hiding a scrollbar, consider styling it.
The Solution
You can hide the scrollbar with CSS using the -webkit-scrollbar CSS pseudo-element:
body::-webkit-scrollbar { display: none; }
This will only work for Blink- and WebKit-based browsers: Chrome, Edge, Opera, Safari, all browsers on iOS, and others.
To hide the scrollbar in Firefox, set the scrollbar-width CSS property on the <html> element to “none”:
html { scrollbar-width: none; }
You can also hide the scrollbar using JavaScript. For example, you can create a button to toggle the scrollbar visibility:
<button id="scrollbarToggle"> Toggle Scrollbar </button>
Create two different CSS classes to hide the scrollbar in Blink- and WebKit-based browsers or Firefox:
body.noScrollbarBlinkWebKit::-webkit-scrollbar { display: none; } html.noScrollbarFirefox { scrollbar-width: none; }
You can then add an event listener to the button and toggle the CSS class on or off. The CSS class toggled will depend on the browser:
const scrollbarToggle = document.getElementById("scrollbarToggle"); const { userAgent } = navigator; const isWebkit = /\b(iPad|iPhone|iPod)\b/.test(userAgent) || /WebKit/.test(userAgent) || /Chrome/.test(userAgent) || /Edge/.test(userAgent) || window.MSStream; function toggleScrollbar() { if (!isWebkit) { document.documentElement.classList.toggle("noScrollbarFirefox"); } else if (isWebkit) { document.body.classList.toggle("noScrollbarBlinkWebKit"); } } scrollbarToggle.addEventListener("click", () => { toggleScrollbar(); });
The type of browser is detected using the user agent. Browser detection is generally not recommended.
- YoutubeHow Sentry.io saved me from disaster
- ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
- SentryJavascript Error Monitoring & Tracing
- ResourcesJavaScript Frontend Error Monitoring 101
- Syntax.fmListen to the Syntax Podcast
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.