Custom Scroll Bar

Elegant scrolling experiences without writing custom CSS

About Plugin

Documentation

Install

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.

Preview

Go to Editor

Go to Preview

When to Use

Everything you need in a single plugin

palette

Brand Consistency

expand_more

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

Dark Mode Applications

expand_more

space_dashboard

Minimalist Clean Interfaces

expand_more

business_center

Professional Business Apps

expand_more

linear_scale

Custom Scroll Indicators

expand_more

Benefits

bolt

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.

public

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.

update

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.

auto_awesome

Professional Look

Custom scrollbars elevate overall app appearance beyond default browser styling. Small detail that significantly impacts perceived quality and professionalism of your application.

verified

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.

touch_app

User Feedback

Hover state provides interactive visual feedback when users interact with scrollbar. Clear indication of interactive elements improves usability and meets user expectations.

visibility_off

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.

done_all

Cross-Page Consistency

Same styling across all pages automatically without per-page configuration. Consistent user experience throughout application maintains professional appearance and usability.

bolt

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.

public

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.

update

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.

auto_awesome

Professional Look

Custom scrollbars elevate overall app appearance beyond default browser styling. Small detail that significantly impacts perceived quality and professionalism of your application.

verified

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.

touch_app

User Feedback

Hover state provides interactive visual feedback when users interact with scrollbar. Clear indication of interactive elements improves usability and meets user expectations.

visibility_off

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.

done_all

Cross-Page Consistency

Same styling across all pages automatically without per-page configuration. Consistent user experience throughout application maintains professional appearance and usability.

bolt

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.

public

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.

update

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.

auto_awesome

Professional Look

Custom scrollbars elevate overall app appearance beyond default browser styling. Small detail that significantly impacts perceived quality and professionalism of your application.

verified

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.

touch_app

User Feedback

Hover state provides interactive visual feedback when users interact with scrollbar. Clear indication of interactive elements improves usability and meets user expectations.

visibility_off

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.

done_all

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

width_normal

Scrollbar Width Control

expand_more

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.

color_lens

Scrollbar Colors

expand_more

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.

rounded_corner

Border Radius

expand_more

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.

view_stream

Track Styling

expand_more

Customize background color and border radius of scrollbar track. Create subtle or prominent track appearance that complements scrollbar thumb styling.

gradient

Inner Shadow

expand_more

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_source

Hide Option

expand_more

Completely hide scrollbars while maintaining scroll functionality. Set to none and scrollbars disappear but users can still scroll normally. Perfect for clean minimalist designs.

disabled_by_default

No Elements Required

expand_more

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.

alt_route

No Workflows Needed

expand_more

No actions to configure, no workflows to create. Settings apply automatically from plugin configuration. Install, configure, done. Simplest possible implementation.

Documentation

FAQ

Common questions

helpDoes this work in all browsers?

helpCan I style scrollbars differently on different pages?

helpWhat happens if I hide scrollbars?

helpCan I use transparent colors?

helpHow do I match my brand colors?

helpWill this affect mobile users?

helpCan I animate the hover transition?

helpWhat if I want scrollbar on left side?

helpDoes this impact performance?

helpCan I revert to default scrollbars?

Contato