How to Hide Scrollbars with CSS While Keeping Scroll Functionality

Every web designer and developer eventually faces the challenge of creating a sleek, modern interface where the default browser scrollbar feels out of place. Whether you're building a custom carousel, a floating sidebar, or a modal with overflow content, the visual appearance of scrollbars can clash with your carefully crafted design.

But hiding scrollbars isn't just about aesthetics--it requires careful consideration of user experience and accessibility. In this guide, you'll discover multiple CSS techniques to hide scrollbars while maintaining full scroll functionality. We'll explore modern cross-browser solutions, understand the browser-specific approaches, and most importantly, learn how to implement these techniques without compromising accessibility for users who depend on visible scroll cues.

For professional implementation of modern CSS techniques across your web projects, consider partnering with experienced web development services that understand the balance between design aesthetics and technical best practices.

The Three Pillars of Scrollbar Hiding

Modern browsers support three distinct approaches to hiding scrollbars, each with different browser support and use cases:

1. WebKit/Blink Pseudo-Elements (Chrome, Safari, Edge)

For WebKit-based browsers (Chrome, Safari, Edge, Opera), CSS provides a set of pseudo-elements that let you customize or hide scrollbars entirely:

/* Complete scrollbar hiding */
.element::-webkit-scrollbar {
 display: none;
}

/* Selective hiding */
.element::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}

.element::-webkit-scrollbar-track {
 background: transparent;
}

.element::-webkit-scrollbar-thumb {
 background: transparent;
}

2. Standard Scrollbar Properties (Firefox)

Firefox supports two standard CSS properties that were introduced to provide a cross-browser solution:

/* Hide scrollbar but keep functionality */
.element {
 scrollbar-width: none;
 -ms-overflow-style: none;
}

3. Cross-Browser Solution

The most reliable approach combines all three techniques to ensure consistent behavior across browsers:

/* Cross-browser scrollbar hiding */
.hide-scrollbar {
 scrollbar-width: none;
 -ms-overflow-style: none;
 -webkit-overflow-scrolling: touch;
}

.hide-scrollbar::-webkit-scrollbar {
 display: none;
}

This combination ensures that Firefox respects scrollbar-width: none, Internet Explorer and legacy Edge use ms-overflow-style, Chromium browsers hide via the webkit pseudo-element, and mobile browsers get smooth touch scrolling with -webkit-overflow-scrolling: touch.

::-webkit-scrollbar Pseudo-Elements Reference

The webkit scrollbar pseudo-elements provide granular control over every scrollbar component:

Example: Custom styled scrollbar

.custom-scrollbar::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 5px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #555;
}

As documented by MDN Web Docs, these pseudo-elements provide extensive customization options for creating custom scroll experiences that align with your brand guidelines.

To learn more about creating polished user interfaces with advanced CSS techniques, explore our UI/UX design services for comprehensive design and development support.

Practical Use Cases

Card Component with Scrollable Content

.scroll-card {
 max-height: 300px;
 overflow-y: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.scroll-card::-webkit-scrollbar {
 display: none;
}

.scroll-card-content {
 padding: 20px;
}

Horizontal Image Gallery

.image-gallery {
 display: flex;
 overflow-x: auto;
 overflow-y: hidden;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
}

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

.gallery-item {
 flex: 0 0 auto;
 margin-right: 10px;
}

Fixed Sidebar with Independent Scrolling

.layout-container {
 display: flex;
 height: 100vh;
}

.main-content {
 flex: 1;
 overflow-y: auto;
}

.sidebar {
 width: 300px;
 height: 100vh;
 overflow-y: auto;
 scrollbar-width: none;
}

.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
 display: none;
}

These patterns are commonly used in modern web application interfaces where visual consistency is essential for creating polished user experiences.

For additional CSS techniques that enhance user interfaces, including scroll animations and scroll-based effects, explore our comprehensive collection of UI/UX guides.

Why Accessibility Matters

Hiding scrollbars can create significant barriers for users with disabilities:

Motor Impairments: Users who rely on scrollbars as click targets may struggle to identify scrollable areas when scrollbars are hidden.

Cognitive Disabilities: Visible scrollbars provide important affordances that communicate interactivity. Removing them can confuse users who depend on these visual cues.

Screen Reader Users: While screen readers typically announce scrollable regions, visual users lose important contextual information.

WCAG Guidelines

According to the WCAG 2.1 Guidelines:

• WCAG 2.1 Success Criterion 1.4.3: If scrollbars are visible, they must meet contrast requirements
• WCAG 2.1 Success Criterion 2.5.5: Interactive elements should be at least 44×44 pixels

Best Practices

1. Never hide scrollbars on main content areas
2. Provide alternative indicators (shadow gradients, scroll indicators)
3. Test with keyboard navigation
4. Consider hover states to show scrollbars on hover

/* Show scrollbar on hover */
.scroll-container:hover::-webkit-scrollbar {
 display: block;
}

.scroll-container:hover {
 scrollbar-width: thin;
}

On touch devices, hidden scrollbars are generally acceptable since users discover scrollability through natural touch gestures.

Accessible web design is not just about compliance--it's about reaching all users effectively. Learn how accessible design principles intersect with SEO services to create websites that perform well in search while serving every visitor.

Recommended Cross-Browser Solution

Based on extensive community testing documented on Stack Overflow, the most reliable approach combines all browser-specific properties:

/* Universal scrollbar hiding */
.scrollbar-hidden {
 scrollbar-width: none;
 -ms-overflow-style: none;
 -webkit-overflow-scrolling: touch;
}

.scrollbar-hidden::-webkit-scrollbar {
 display: none;
}

This solution is recommended by the CSS Scrollbar Styling Module Level 1 specification and provides consistent behavior across all modern browsers.

Common Pitfalls and Solutions

Pitfall 1: Lost Scroll Functionality

Problem: Using overflow: hidden removes scroll capability entirely.

Solution: Use scrollbar-specific properties instead:

/* Wrong */
.wrong {
 overflow: hidden;
}

/* Correct */
.correct {
 overflow: auto;
 scrollbar-width: none;
}

Pitfall 2: Choppy Scrolling on iOS

Problem: Hide scrollbars but experience jerky scrolling on iPhones.

Solution: Add -webkit-overflow-scrolling: touch:

.smooth-scroll {
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.smooth-scroll::-webkit-scrollbar {
 display: none;
}

Pitfall 3: Width Shift When Hiding

Problem: Removing scrollbar causes content width to jump.

Solution: Reserve scrollbar space:

.scrolling-element {
 scrollbar-width: none;
 width: calc(100% + 20px);
}

.scrolling-element::-webkit-scrollbar {
 display: none;
}

For more solutions to common CSS challenges, explore our web development services to learn how our team handles complex interface requirements.

Additionally, learn how to hide vertical scrollbars while keeping content scrollable for vertical-only scrolling scenarios.

Advanced Techniques

Custom Scrollbar Design (Visible)

For cases where you want custom scrollbars rather than hidden ones, you can create a branded scroll experience:

.custom-scroll {
 scrollbar-width: thin;
 scrollbar-color: #888 #f1f1f1;
}

.custom-scroll::-webkit-scrollbar {
 width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
 background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
 background: #555;
}

CSS Variables for Maintainable Scrollbar Styling

For maintainable scrollbar styling across your application, use CSS variables:

:root {
 --scrollbar-width: 8px;
 --scrollbar-track: #f1f1f1;
 --scrollbar-thumb: #888;
 --scrollbar-thumb-hover: #555;
}

.custom-scroll {
 scrollbar-width: var(--scrollbar-width);
 scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.custom-scroll::-webkit-scrollbar {
 width: var(--scrollbar-width);
}

.custom-scroll::-webkit-scrollbar-track {
 background: var(--scrollbar-track);
}

.custom-scroll::-webkit-scrollbar-thumb {
 background: var(--scrollbar-thumb);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
 background: var(--scrollbar-thumb-hover);
}

This approach, recommended by LogRocket's comprehensive guide, ensures consistent styling and easy maintenance across large applications.

For Mozilla-specific scrollbar styling options, check out our guide on CSS tags for Mozilla browser scrollbar styling.

Summary

Hiding scrollbars while maintaining scroll functionality requires a multi-pronged approach for cross-browser compatibility:

1. Use the complete cross-browser solution that combines scrollbar-width, -ms-overflow-style, and ::-webkit-scrollbar pseudo-elements

2. Prioritize accessibility by keeping scrollbars visible for main content areas and providing alternative indicators for custom components

3. Test across devices including mobile touch interactions and keyboard navigation to ensure consistent behavior

4. Consider performance by using class-based application and limiting nested scroll containers to prevent layout thrashing

5. Provide graceful fallbacks for older browsers that don't support modern scrollbar properties

By following these guidelines, you can create interfaces that are both visually refined and accessible to all users. For more insights on building modern, accessible web interfaces, explore our UI/UX design services.

Sources

1. LogRocket: How to use CSS to hide scrollbars without impacting scrolling - Comprehensive tutorial with interactive examples
2. MDN Web Docs: ::-webkit-scrollbar - Official documentation for scrollbar pseudo-elements
3. Stack Overflow: Hide scroll bar, but while still being able to scroll - Community-tested cross-browser solutions
4. CSS Scrollbar Styling Module Level 1 - W3C Editor's Draft - W3C specification for scrollbar styling
5. WCAG 2.1 Guidelines - Web Content Accessibility Guidelines