CSS
CSS Guide: How to Hide Scrollbars Without Losing Scroll Functionality
Spread the love
Scrollbars are useful, but sometimes, especially in modern, minimal UI designs, you might want to hide the scrollbar while still allowing the user to scroll. Fortunately, CSS makes this possible with just a few lines of code.
In this article, you’ll learn:
- โ When and why you might want to hide scrollbars
- ๐งฐ Cross-browser methods for hiding scrollbars using CSS
- ๐งช Code examples that maintain scroll functionality
- ๐ก Best practices and considerations
โ Why Hide Scrollbars?
Here are a few use cases where hiding scrollbars is desirable:
- When using custom scroll behavior or animations
- To achieve a clean, distraction-free layout
- In touch devices where scrollbars aren’t always needed
- For horizontally scrolling sections or sliders
๐งฐ CSS Techniques to Hide Scrollbars
๐น Method 1: Hide Scrollbar (Maintain Scroll) โ WebKit Browsers
.hide-scrollbar {
overflow: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
โ HTML Example
<div class="hide-scrollbar" style="height: 200px;">
<p>This container can scroll, but the scrollbar is hidden.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>More content...</p>
</div>
- This keeps the scrolling enabled, but hides the scrollbar.
- Works across modern browsers, including Chrome, Firefox, Safari, and Edge.
๐น Method 2: Hide Only Horizontal or Vertical Scrollbars
Hide Horizontal Scrollbar:
.no-scrollbar-x {
overflow-x: hidden;
}
Hide Vertical Scrollbar:
.no-scrollbar-y {
overflow-y: hidden;
}
๐งช Full Working Example
<style>
.scroll-box {
width: 300px;
height: 150px;
overflow: auto;
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
.scroll-box::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.content {
height: 500px;
background: linear-gradient(#f8f8f8, #ccc);
padding: 10px;
}
</style>
<div class="scroll-box">
<div class="content">
This scrollable content has its scrollbar hidden.
</div>
</div>
๐ก Things to Keep in Mind
Consideration | Tip |
---|---|
Accessibility | Make sure users know the content is scrollable |
Performance | Don’t hide scrollbars on large containers unnecessarily |
Touch Devices | Scrollbars are usually hidden by default on mobile |
Keyboard Navigation | Ensure tab , arrow , and focus navigation still work |
โ Conclusion
Hiding scrollbars in CSS is straightforward and useful for improving visual design. With just a few lines of code, you can remove scrollbars while still allowing users to scroll using a mouse, keyboard, or touch gesture.
โจ Quick Snippet to Remember:
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar {
display: none;
}
Spread the love