Scrollable Fixed Div But Hide Scrollbars

Why Hide Scrollbars on Fixed Elements?

Modern web interfaces often require fixed-position panels with scrollable content, but the default scrollbar appearance can clash with carefully crafted designs. Whether you're building a persistent sidebar navigation, a fixed chat panel, or a floating control interface, the challenge remains consistent: how do you enable scrolling while keeping the scrollbar visually hidden?

Fixed elements create persistent UI patterns that benefit from clean aesthetics. Sidebar navigation, control panels, and modal overlays often need hidden scrollbars to maintain visual consistency. The scrollbar width varies across browsers--Windows Chrome shows approximately 17px while macOS Safari displays around 15px--causing layout inconsistencies that can break carefully designed interfaces, as documented by Stack Overflow's community solutions.

Common Use Cases

Fixed scrollable elements appear throughout modern web applications. Side navigation menus with overflow content benefit from hidden scrollbars when brand consistency takes priority. Floating chat widgets and support panels often hide scrollbars to maintain a clean, approachable appearance. Modal dialogs with scrollable internal content, sticky control panels in dashboard interfaces, and fixed header/sidebar combinations all rely on this technique.

The user experience considerations are crucial: hiding scrollbars works best when users can intuitively discover scrollable content through other visual cues like item peeking at edge shadows. When implemented thoughtfully, hidden scrollbars create more polished interfaces without sacrificing usability. For comprehensive scrollbar customization options beyond hiding, see our guide on the current state of styling scrollbars in CSS.

Our UI/UX design services focus on creating interfaces that convert, balancing visual appeal with intuitive user interactions across every screen.

Modern CSS: scrollbar-width Property

The scrollbar-width property, part of the CSS Scrollbars Styling Module Level 1 specification, provides a standard way to control scrollbar appearance across modern browsers:

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

Property Values

The specification defines three distinct values for controlling scrollbar behavior. Setting scrollbar-width: none completely hides the scrollbar while maintaining full scrolling functionality. The scrollbar-width: thin value displays a narrower scrollbar that takes up less visual space. For browsers that support it, scrollbar-width: auto uses the platform-default scrollbar width, as explained in LogRocket's comprehensive CSS guide.

Browser Support

Firefox 64 and later versions offer full support for the scrollbar-width property as part of the standard implementation. Chrome and Edge provide partial support, with the property available behind experimental flags in newer releases. For production applications requiring cross-browser compatibility, combining scrollbar-width: none with WebKit pseudo-elements ensures consistent behavior across Firefox, Chrome, Safari, Opera, and Edge. This layered approach--using both the modern standard and browser-specific properties--delivers the most reliable results for hiding scrollbars while preserving functionality.

Understanding these browser differences is essential for creating consistent user experiences. The CSS Scrollbars Styling Module Level 1 specification on W3C provides the official documentation for developers implementing scrollbar control.

WebKit Scrollbar Pseudo-Elements

WebKit-based browsers including Chrome, Safari, Opera, and the Chromium version of Edge use pseudo-elements to style scrollbars. This powerful system provides granular control over every scrollbar component, enabling complete customization or total removal, as documented by MDN Web Docs.

Complete Scrollbar Hiding Solution

.scrollable-element::-webkit-scrollbar {
 width: 0px;
 height: 0px;
 background: transparent;
}

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

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

Scrollbar Parts and Their Pseudo-Elements

The WebKit pseudo-element system includes multiple targeting options for precise control. The ::-webkit-scrollbar selector targets the entire scrollbar container. The ::-webkit-scrollbar-track applies to the scrollbar's background track. The ::-webkit-scrollbar-thumb styles the draggable handle users interact with. Additional pseudo-elements include ::-webkit-scrollbar-button for the arrow buttons at each end, ::-webkit-scrollbar-corner for the intersection when both horizontal and vertical scrollbars appear, and ::-webkit-scrollbar-resizer for the legacy resizer handle.

By setting width: 0 and background: transparent on each of these pseudo-elements, you completely remove the scrollbar's visual presence while the element remains fully scrollable through mouse wheel, keyboard navigation, and touch gestures. For more cross-browser CSS techniques, explore our guide on cross-browser opacity and CSS compatibility.

The Inner Wrapper Technique for Fixed Elements

Fixed-position elements can behave differently with scrolling due to how browsers handle the viewport and scroll contexts. When hiding scrollbars on fixed elements, the inner wrapper technique provides the most reliable cross-browser solution by separating concerns between positioning and scrolling, as demonstrated in Stack Overflow's validated solutions.

HTML Structure

<div class="fixed-scrollable-container">
 <div class="scrollable-inner">
 <div class="content">
 <!-- Your scrollable content here -->
 </div>
 </div>
</div>

CSS Implementation

/* Outer fixed container */
.fixed-scrollable-container {
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: 300px;
 overflow: hidden;
}

/* Inner scrollable wrapper */
.fixed-scrollable-container .scrollable-inner {
 height: 100%;
 overflow-y: auto;
 overflow-x: hidden;
 padding-right: 0;
}

/* Hide scrollbar across all browsers */
.fixed-scrollable-container .scrollable-inner {
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.fixed-scrollable-container .scrollable-inner::-webkit-scrollbar {
 width: 0;
 display: none;
}

Benefits of This Approach

The inner wrapper technique offers several advantages for fixed-position scrollable elements. First, it isolates scroll behavior to the inner element while keeping fixed positioning on the outer container, preventing unexpected layout shifts. Second, this separation makes the CSS easier to maintain since scrolling concerns don't interact with positioning properties. Third, the technique prevents scrollbar-related layout jank--when scrollbars appear and disappear during page scrolling, the fixed container remains stable. Fourth, testing becomes more straightforward since each layer handles a specific responsibility. This approach is particularly valuable for complex interfaces like dashboard panels, admin sidebars, and persistent navigation elements where consistent behavior across browsers is essential.

For projects using Tailwind CSS, you can create a custom utility class that combines these techniques into a single reusable class for consistent scrollbar hiding across your application.

Accessibility Considerations

Hiding scrollbars while keeping scrolling functionality creates a potential usability issue: users may not realize content is scrollable. This affects users with cognitive disabilities who rely on visual cues, users unfamiliar with the interface, touch-only users who may not discover swipe gestures, and keyboard users who can still scroll but lack visual feedback, as noted in OpenReplay's accessibility-focused guide.

WCAG Guidelines and Best Practices

While no specific WCAG failure exists for hidden scrollbars, hiding essential navigation controls can impact several guidelines. WCAG 2.4.7 Focus Visible requires ensuring scrollable regions have visible focus indicators. WCAG 3.2.3 Consistent Navigation means standard patterns help users understand interactions. For interfaces where scrollbar hiding is essential to the design, these practices ensure accessibility isn't compromised.

Accessible Implementation Strategies

Provide Visual Indicators: Show partial content at edges using shadow gradients or item peeking. This subtle cue signals scrollability without cluttering the interface.

Maintain Keyboard Accessibility: Ensure Tab navigation can reach scrollable regions and that keyboard scrolling (arrow keys, Page Up/Down) works as expected.

Add ARIA Labels: Use aria-label or aria-describedby to indicate scrollable content for screen reader users. This aligns with accessibility best practices covered in our guide on using Axe DevTools for web accessibility testing.

Consider Hover Reveal: Optionally show scrollbar on hover for desktop users who prefer traditional controls while keeping the interface clean by default.

Test Comprehensively: Verify behavior with screen readers, keyboard-only navigation, and actual touch devices--not just browser emulators.

/* Visual shadow gradient indicating scrollable content */
.fixed-scrollable::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 40px;
 background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
 pointer-events: none;
 z-index: 1;
}

.fixed-scrollable::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 20px;
 background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
 pointer-events: none;
 z-index: 1;
}

This shadow gradient approach provides a subtle visual cue that content extends beyond the visible area, helping users discover scrollability while maintaining a clean aesthetic.

Sources

1. Stack Overflow - Hide scrollbar on div with position: fixed property - Community-validated solutions for fixed elements
2. LogRocket - How to use CSS to hide scrollbars without impacting scrolling - Comprehensive browser-specific CSS properties guide
3. OpenReplay - Hide Scrollbars Using CSS: Quick Examples and Best Practices - Accessibility-focused implementation strategies
4. MDN Web Docs - ::-webkit-scrollbar - Official WebKit pseudo-element documentation