Sentry Answers>JavaScript>

Hide scroll bar, while still being able to scroll

Hide scroll bar, while still being able to scroll

Matthew C.

The ProblemJump To Solution

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:

Click to Copy
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”:

Click to Copy
html { scrollbar-width: none; }

You can also hide the scrollbar using JavaScript. For example, you can create a button to toggle the scrollbar visibility:

Click to Copy
<button id="scrollbarToggle"> Toggle Scrollbar </button>

Create two different CSS classes to hide the scrollbar in Blink- and WebKit-based browsers or Firefox:

Click to Copy
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:

Click to Copy
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.

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • ResourcesJavaScript Frontend Error Monitoring 101
  • logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.


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.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.