# Hiding body scrollbars using CSS

DevFeed: [Hiding body scrollbars using CSS](<https://devfeed.tech/articles/hiding-body-scrollbars-using-css-37280.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/hiding-body-scrollbars-using-css/>)

Author: Stanko

Published: 2019-03-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>)

## AI overview

A CSS tutorial explains how to hide body scrollbars with cross-browser rules, while warning that doing so can harm accessibility and user experience. It notes limited use cases such as scrolling effects and open modals, and mentions styling scrollbars in WebKit-based browsers and applying the technique to other elements.

## Source excerpt

Let me start with a little disclaimer. Just because you can, doesn't mean you should use it. Hiding scrollbars can be bad for accessibility and user experience. But there are rare cases where it makes sense, usually when you have scrolling effects or when modal is opened. So use it wisely. Check the demo. And find the cross browser code below: html, body { /* Firefox */ scrollbar-width: none; /* IE 10+ */ -ms-overflow-style: none; } /* WebKit - Safari, Chrome, Opera */ body::-webkit-scrollbar { width: 0; height: 0; } Don't forget you can style scrollbars in webkit based browsers. Also you can use this code on any other element, not just body. Happy coding.