Custom Scroll Bar
Elegant scrolling experiences without writing custom CSS
5
Rating
22
Installs
v1.0.2
Version
The Custom Scroll Bar plugin injects CSS into your application's header that targets webkit scrollbar pseudo-elements. Configuration values from plugin settings dynamically replace placeholders in CSS rules, applying custom styling to all scrollbars throughout your entire Bubble application. Changes update instantly without page refresh. Works through pure CSS with no JavaScript required.
When to Use
Everything you need in a single plugin
Brand Consistency
Match scrollbars to your application's color scheme and design language. Use brand colors for scrollbar and track, coordinate with your design system, and create cohesive branded experience across all UI elements.
Dark Mode Applications
Create dark-themed scrollbars that blend seamlessly with dark mode interfaces. Use dark gray colors, stronger shadows for depth, and lighter hover states for visibility in dark contexts.
Minimalist Clean Interfaces
Hide scrollbars completely for ultra-clean, distraction-free user experience. Perfect for portfolio sites, landing pages, or mobile-first applications where visual simplicity is priority.
Professional Business Apps
Polished scrollbar styling elevates overall application appearance for enterprise contexts. Standard sizing with subtle professional colors and slight border radius creates refined look.
Custom Scroll Indicators
Hide default scrollbars and implement custom scroll position indicators. Build custom progress bars or scroll visualizations while hiding browser default scrollbars.
Benefits
Everything you need in a single plugin
Zero Setup Time
Just configure plugin settings and it works - no elements to add, no workflows to create. Install, configure eight fields, and custom scrollbar applies globally across entire application instantly.
Global Styling
One configuration affects entire application consistently. Set scrollbar appearance once and it applies to all pages, repeating groups, popups, and scrollable areas automatically.
Instant Updates
Changes apply immediately without page refresh. Adjust colors, width, or radius in plugin settings and see results instantly in preview mode. Rapid iteration for perfect appearance.
Professional Look
Custom scrollbars elevate overall app appearance beyond default browser styling. Small detail that significantly impacts perceived quality and professionalism of your application.
Brand Alignment
Match scrollbars to your design system for cohesive branded experience. Coordinate colors with your palette, match border radius to your components, align with overall aesthetic.
User Feedback
Hover state provides interactive visual feedback when users interact with scrollbar. Clear indication of interactive elements improves usability and meets user expectations.
Flexible Hiding
Hide scrollbars while maintaining full scroll functionality. Users can still scroll with mouse wheel, trackpad, or touch gestures. Perfect for minimalist designs or custom indicators.
Cross-Page Consistency
Same styling across all pages automatically without per-page configuration. Consistent user experience throughout application maintains professional appearance and usability.
Key Features
Everything you need in a single plugin
Scrollbar Width Control
Set thickness of scrollbar in pixels from slim 8px modern style to wide 20px prominent appearance. Configure once and applies globally to all scrollable areas.
Scrollbar Colors
Set default color and hover color independently. Use hex, RGB, RGBA, or color names. Support for semi-transparent colors and full spectrum of brand colors.
Border Radius
Control rounding of scrollbar and track corners separately. Range from sharp 0px geometric style to fully rounded pill shape. Match your app's overall design language.
Track Styling
Customize background color and border radius of scrollbar track. Create subtle or prominent track appearance that complements scrollbar thumb styling.
Inner Shadow
Add inset shadow to track for depth effect. Configure shadow color with RGBA for opacity control. Creates subtle 3D appearance making scrollbar feel recessed.
Hide Option
Completely hide scrollbars while maintaining scroll functionality. Set to none and scrollbars disappear but users can still scroll normally. Perfect for clean minimalist designs.
No Elements Required
Zero elements to add to pages. Pure plugin configuration in Plugins tab. No visual elements in editor, no elements in element tree, no per-page setup needed.
No Workflows Needed
No actions to configure, no workflows to create. Settings apply automatically from plugin configuration. Install, configure, done. Simplest possible implementation.
Common Questions
Everything you need to know before installing
Does this work in all browsers?
Works in all webkit-based browsers including Chrome, Edge, Safari, Opera, and Brave. Firefox uses different CSS properties and will show default scrollbars. Represents 80%+ of users on webkit browsers with full functionality for all users.
Can I style scrollbars differently on different pages?
No, this is global styling that affects entire application. One configuration applies to all scrollbars throughout app. For per-element control, you would need custom CSS code targeting specific elements.
What happens if I hide scrollbars?
Scrollbars become invisible but scroll functionality remains fully operational. Users can scroll with mouse wheel, trackpad gestures, arrow keys, and touch gestures. Only visual appearance is hidden.
Can I use transparent colors?
Yes, use CSS color keywords like transparent or RGBA values like rgba(0, 0, 0, 0.5) for semi-transparent appearance. Useful for subtle scrollbars that blend with backgrounds or invisible tracks.
How do I match my brand colors?
Use your brand color hex codes in Scrollbar Color field. Use complementary or lighter shade for hover state. Use very light tint of brand color for track. Example: Blue brand #4A90E2 with light blue track #E8F4FD.
Will this affect mobile users?
Mobile browsers often use native OS scrollbars that cannot be styled with CSS. Your custom styling primarily affects desktop users. Mobile users see default scrollbars or no visible scrollbars depending on device. Does not break functionality.
Can I animate the hover transition?
Color change happens instantly based on CSS pseudo-class. For animated transitions, you would need additional CSS with transition property. This plugin focuses on color values rather than transition timing.
What if I want scrollbar on left side?
Scrollbar position (left vs right) is controlled by browser and HTML direction attribute, not CSS styling. This plugin styles appearance (colors, size, radius) but does not control positioning or layout direction.
Does this impact performance?
No, minimal performance impact. Pure CSS applied once on page load with no JavaScript runtime cost. No per-element overhead, no recalculation, no reflow. Styling is static and efficient.
Can I revert to default scrollbars?
Yes, simply clear all plugin configuration fields or uninstall the plugin. Browser reverts to default scrollbar styling immediately. No permanent changes to your application or code.