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.
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.
Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.
Create a free Sentry account
Create a JavaScript project and note your DSN
Grab the Sentry JavaScript SDK
<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });
Loved by over 4 million developers and more than 90,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.