Hide Scrollbar CSS

Why Hide Scrollbars?

In modern web design, creating sleek, visually appealing interfaces often involves minimizing visual clutter. Scrollbars, while essential for navigation, can disrupt clean design aesthetics when they appear in custom containers, modals, or themed interfaces. This guide explores CSS techniques for hiding scrollbars while preserving full scroll functionality, ensuring your designs remain both beautiful and usable.

User-centered design angle: Interfaces that hide scrollbars appropriately show attention to detail and respect user preferences for visual consistency, while maintaining the underlying functionality that users depend on for navigation.

Our UI/UX design services help you create interfaces that balance aesthetic appeal with usability. We apply these scrollbar techniques alongside broader interface design principles to deliver seamless user experiences. For projects requiring deeper technical integration, our web development team can implement these solutions within comprehensive front-end architectures.

When Hiding Scrollbars Makes Sense

Modern minimalist interfaces often benefit from hidden scrollbars in containers where content is expected to scroll. Custom themed websites may want scrollbars to match brand styling rather than default browser appearance. Immersive experiences like presentations, storytelling interfaces, or media viewers often hide scrollbars to maintain focus on content rather than browser chrome. Mobile-app-like web interfaces frequently hide scrollbars since touch interfaces don't display them by default.

Functional benefits include additional screen real estate for content, a consistent experience across different browser scrollbar styles, and the ability to implement custom scroll indicators that align with your design system. The key is making a deliberate choice based on your specific use case and audience needs.

According to CoreUI's implementation guide, scrollbar hiding should always balance visual appeal with usability. For fixed-height containers with overflow content that has clear visual indicators, custom scroll solutions with touch and swipe gestures, branded interfaces where default scrollbars clash with design language, and touch-first interfaces where scrollbars are unnecessary, hiding scrollbars enhances the user experience rather than diminishing it.

When Not to Hide Scrollbars

Hiding scrollbars should be a deliberate choice, not a default implementation. Critical accessibility considerations include users who rely on visual scrollbar cues for orientation, traditional desktop interfaces where scrollbars provide expected affordance, and content-heavy pages where hidden scrollbars might confuse users about scrollability. Always consider your audience and use case carefully before implementing scrollbar hiding.

CSS Fundamentals: Understanding Scrollbar Behavior

The Overflow Property Foundation

The overflow property is the foundation of scrollbar control in CSS. Understanding how each value affects both scrollbar visibility and scrolling functionality is essential for implementing scrollbar hiding correctly.

/* Show scrollbars when content overflows (default behavior) */
.container {
 overflow: auto;
}

/* Always show both scrollbars */
.container {
 overflow: scroll;
}

/* Hide overflow content entirely (no scrolling) */
.container {
 overflow: hidden;
}

Critical distinction: overflow: hidden removes the scrollbar AND disables scrolling functionality entirely. Hiding scrollbars while preserving scrolling requires different techniques that target only the visual scrollbar element, not the overflow behavior itself.

Vertical and Horizontal Control

Modern CSS allows independent control over vertical and horizontal overflow, giving you precise control over when scrollbars appear:

/* Control vertical overflow separately */
.container {
 overflow-y: auto; /* Show vertical scrollbar when needed */
 overflow-x: hidden; /* Never show horizontal scrollbar */
}

/* Control horizontal overflow separately */
.container {
 overflow-x: auto;
 overflow-y: hidden;
}

Use overflow-y: auto when you want vertical scrolling only when content exceeds the container height. Use overflow-x: auto for horizontal scrolling in wide content layouts. The hidden value completely prevents overflow in that direction, so reserve it for cases where you genuinely don't want that overflow behavior. For scrollbar hiding while preserving functionality, use overflow: auto or overflow-y: auto combined with the scrollbar hiding techniques covered in later sections.

As documented in the MDN Web Docs CSS reference, these foundational overflow properties determine whether scrollbars appear at all, and the subsequent scrollbar hiding techniques work with these properties to control the visual appearance.

Modern Browser Solutions: Standard CSS Properties

scrollbar-width Property

The scrollbar-width property is part of the CSS Scrollbars Styling module and provides a standardized way to control scrollbar thickness across browsers. This property is widely supported in Firefox and increasingly adopted by other browser vendors.

/* Hide scrollbar completely */
.container {
 scrollbar-width: none;
}

/* Show thin scrollbar */
.container {
 scrollbar-width: thin;
}

/* Use default scrollbar width */
.container {
 scrollbar-width: auto;
}

The none value completely hides the scrollbar while preserving all scroll functionality. The thin value displays a narrower scrollbar that takes up less screen space. Use auto to restore the browser's default scrollbar width.

scrollbar-color Property

The scrollbar-color property controls the colors of the scrollbar thumb and track, allowing you to customize the appearance while keeping scrollbars visible:

/* Custom scrollbar colors */
.container {
 scrollbar-color: #thumbColor #trackColor;
}

/* Example: dark scrollbar on light background */
.container {
 scrollbar-color: #888 #f0f0f0;
}

/* Example: styled scrollbar */
.container {
 scrollbar-color: #6c5ce7 #dfe6e9;
}

Browser Support Status: Firefox has full support for both scrollbar-width and scrollbar-color. Chrome, Safari, and Edge support these properties with some limitations, which is why combining standard properties with WebKit pseudo-elements provides the most comprehensive cross-browser solution.

According to LogRocket's compatibility analysis, the modern CSS Scrollbars Styling module represents the standards-based approach, but browser vendors have varying implementation timelines. For production websites, combining scrollbar-width: none with WebKit pseudo-elements ensures the widest possible compatibility while progressively enhancing for browsers that support the standard properties.

For enterprise applications requiring broader compatibility across older browsers, our web development specialists can implement fallback strategies that maintain consistent user experiences across all browser versions.

WebKit Scrollbar Styling: Complete Reference

WebKit-based browsers, including Chrome, Safari, Opera, and the Chromium-based Edge, provide extensive scrollbar customization through pseudo-elements. These selectors allow you to style every component of the scrollbar independently or hide it entirely.

Available WebKit Pseudo-Elements

/* The entire scrollbar */
.container::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}

/* The buttons (arrows) on the scrollbar */
.container::-webkit-scrollbar-button {
 background: #ccc;
 display: none;
}

/* The draggable thumb */
.container::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 4px;
}

/* The track (background of scrollbar) */
.container::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 4px;
}

/* The portion of the track not covered by thumb */
.container::-webkit-scrollbar-track-piece {
 background: #f1f1f1;
}

/* The corner where horizontal and vertical scrollbars meet */
.container::-webkit-scrollbar-corner {
 background: #f1a1a2e;
}

Complete Scrollbar Hiding for WebKit

/* Hide all scrollbar parts for WebKit browsers */
.container::-webkit-scrollbar {
 display: none;
}

/* Alternative: set width to 0 */
.container::-webkit-scrollbar {
 width: 0 !important;
 height: 0 !important;
}

Custom Styled Scrollbar Example

For branded interfaces where you want visible but styled scrollbars, combine multiple pseudo-elements:

/* Custom styled scrollbar */
.custom-scroll::-webkit-scrollbar {
 width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
 background: #1a1a2e;
 border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, #667eea, #764ba2);
 border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
 background: linear-gradient(180deg, #764ba2, #667eea);
}

This approach allows scrollbars to remain visible and functional while matching your brand's color scheme and design language. The MDN Web Docs provides the authoritative reference for all available pseudo-elements and their browser compatibility.

Selective Scrollbar Hiding

Hiding Only Vertical Scrollbars

There are times when you want to hide vertical scrollbars while keeping horizontal functionality, or vice versa. The key is combining overflow direction control with scrollbar hiding techniques:

.hide-vertical-scroll {
 overflow-y: hidden;
}

/* Hide only the visual scrollbar while keeping functionality */
.hide-vertical-scroll {
 overflow-y: auto;
}

.hide-vertical-scroll::-webkit-scrollbar {
 width: 0 !important;
}

Hiding Only Horizontal Scrollbars

.hide-horizontal-scroll {
 overflow-x: hidden;
}

/* Alternative: hide only the visual scrollbar */
.hide-horizontal-scroll {
 overflow-x: auto;
}

.hide-horizontal-scroll::-webkit-scrollbar {
 height: 0 !important;
}

Use Cases for Each Approach

Vertical-only scroll hiding is appropriate for chat message containers where horizontal scrolling isn't needed, sidebar navigation with wrapping content, and single-column content layouts. In these cases, users expect vertical scrolling and horizontal scrollbars would be distracting.

Horizontal-only scroll hiding works well for wide tables that shouldn't wrap, image carousels with consistent item widths, and timeline or horizontal data displays. Here, vertical scrolling isn't expected, so hiding vertical scrollbars maintains design consistency.

The key is understanding user expectations for each interface type. A chat interface should feel like a continuous conversation with no horizontal movement, while a table displaying data horizontally should feel like a spreadsheet where vertical scrolling through rows is natural but horizontal columns should flow continuously.

Practical Applications and Examples

Chat Interface Scrollbar

A common use case is hiding scrollbars in chat interfaces. Users expect smooth, continuous conversation flow without visual interruption from browser scrollbars. The scroll functionality should remain obvious through content movement and interaction:

<div class="chat-container">
 <div class="messages">
 <!-- Chat messages go here -->
 </div>
</div>

.chat-container {
 height: 400px;
 overflow-y: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.chat-container::-webkit-scrollbar {
 display: none;
}

Mobile-Style Drawer Navigation

Navigation drawers that slide in from the side benefit from hidden scrollbars that maintain the mobile app aesthetic. Adding -webkit-overflow-scrolling: touch ensures smooth momentum scrolling on iOS devices:

.drawer-nav {
 position: fixed;
 top: 0;
 right: 0;
 width: 300px;
 height: 100vh;
 overflow-y: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
 -webkit-overflow-scrolling: touch;
}

.drawer-nav::-webkit-scrollbar {
 display: none;
}

Image Gallery with Hidden Scrollbar

Horizontal image galleries benefit from scroll snap behavior combined with hidden scrollbars. This creates an app-like experience where users swipe through images naturally:

.image-gallery {
 display: flex;
 gap: 16px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.image-gallery::-webkit-scrollbar {
 display: none;
}

.gallery-item {
 flex: 0 0 200px;
 scroll-snap-align: start;
}

Each of these examples, as shown in CoreUI's practical implementation guide, demonstrates how scrollbar hiding enhances user experience when combined with appropriate visual indicators and interaction design.

Accessibility Considerations

When hiding scrollbars, accessibility must be a primary consideration. The goal is to create interfaces that work for everyone, including users who rely on visual cues, keyboard navigation, or assistive technology. Our web development services ensure that accessibility best practices are integrated into every project, including proper scrollbar handling.

WCAG Guidelines for Scrollbar Hiding

Following the MDN Web Docs accessibility guidelines, consider these principles when implementing scrollbar hiding:

1. Provide Alternative Visual Cues

• Add subtle scroll indicators such as arrows, dots, or gradients at scrollable edges
• Use content shadows to suggest scrollability (fading gradient at the bottom of content)
• Consider hover-to-reveal scrollbar patterns for desktop users

2. Maintain Keyboard Navigation

• Ensure content remains fully accessible via keyboard
• Test with Tab navigation and verify focus indicators are visible
• Verify scroll behavior works correctly with arrow keys

3. Consider Assistive Technology Users

• Screen readers can still access hidden content
• Ensure ARIA attributes are appropriate for scrollable regions
• Test with actual assistive technology when possible

Best Practices for Accessible Scrollbar Hiding

/* Add subtle indicator for scrollable content */
.scrollable-container {
 position: relative;
}

.scrollable-container::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 20px;
 background: linear-gradient(transparent, rgba(0,0,0,0.1));
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.3s;
}

.scrollable-container:hover::after {
 opacity: 1;
}

When to Avoid Hiding Scrollbars

Avoid hiding scrollbars when the interface is primarily desktop-focused and users expect traditional scrollbar behavior, when users may not discover scrolling via other means such as touch or keyboard, when content scroll position is critical such as forms or multi-step processes, and when accessibility is a primary concern for your audience. Always consider your specific audience and use case before implementing scrollbar hiding.

Troubleshooting Common Issues

Scrollbar Hiding Not Working

Problem: Scrollbar is still visible despite applying CSS rules.

Solutions:

• Check for CSS specificity issues and ensure your selectors are specific enough
• Ensure all vendor prefixes are included (scrollbar-width, -ms-overflow-style, ::-webkit-scrollbar)
• Verify the element actually has overflow content (scrollbars only appear when content exceeds container)
• Test in incognito or private mode to rule out browser extensions that might override styles
• Confirm the element has an explicit height or max-height set

Scrolling Functionality Lost

Problem: After applying scrollbar hiding styles, scrolling no longer works.

Solutions:

• Never use overflow: hidden for scrollbar hiding; this removes both scrollbar and scrolling capability
• Ensure content actually exceeds container dimensions to trigger scrolling
• Check for JavaScript that might be overriding scrolling behavior
• Verify container has an explicit height or max-height set
• Test with different content lengths to confirm overflow exists

Content Padding Issues

Problem: Content appears flush against the container edge when scrollbar is hidden.

Solutions:

• Add padding to the inner content element rather than the scroll container
• Use box-sizing: border-box for predictable sizing calculations
• Account for scrollbar width in your layout calculations if you need precise spacing

Mobile Safari Issues

Problem: iOS Safari shows unwanted scrollbars, experiences bouncing, or has jerky scrolling.

Solutions:

.ios-scroll-container {
 -webkit-overflow-scrolling: touch;
 overflow-y: auto;
}

.ios-scroll-container::-webkit-scrollbar {
 display: none;
}

/* Prevent rubber-banding effect on the page */
body {
 overscroll-behavior: none;
}

The -webkit-overflow-scrolling: touch property enables momentum scrolling on iOS, making scroll behavior feel native. Combined with the scrollbar hiding techniques, this creates a smooth, app-like experience on mobile devices.

Best Practices Summary

Do:

• Use scrollbar-width: none as your primary modern solution
• Combine with WebKit pseudo-elements for full cross-browser compatibility
• Provide visual alternatives for scroll indication (shadows, gradients, icons)
• Test across target browsers and devices before deployment
• Consider accessibility impact for your specific audience
• Use overflow: auto to show scrollbars only when content actually overflows

Don't:

• Use overflow: hidden as a scrollbar hiding technique (it removes both scrollbar AND scrolling)
• Hide scrollbars without considering accessibility implications
• Assume all users can discover hidden scroll behavior through other means
• Forget to test with keyboard navigation and assistive technology
• Apply scrollbar hiding globally without consideration for different contexts

Recommended Universal Approach

For most projects, this combination provides reliable cross-browser support:

.element {
 /* Firefox */
 scrollbar-width: none;

 /* IE and Edge Legacy */
 -ms-overflow-style: none;
}

.element::-webkit-scrollbar {
 /* Chrome, Safari, Opera, and modern Edge */
 display: none;
}

Start with the standard scrollbar-width: none for modern browsers, add -ms-overflow-style: none for Internet Explorer and legacy Edge, then include the WebKit pseudo-element for Chrome, Safari, and Opera. This progressive enhancement approach ensures the widest possible compatibility while keeping your code clean and maintainable.

Sources

1. MDN Web Docs - ::-webkit-scrollbar - Authoritative CSS reference for WebKit scrollbar pseudo-elements and styling
2. CoreUI - How to Hide Scrollbar with CSS - Practical implementation guide with cross-browser techniques
3. LogRocket - CSS Hide Scrollbar - Comprehensive guide on hiding scrollbars without impacting functionality