Custom Content Scrollbar styles the main page scrollbar and lets you create scrollable areas anywhere: with the “Custom Scrollbar” block, a shortcode, or a CSS selector.

Choose between two engines:

mCustomScrollbar: full-featured scrollbars with 26 ready-made themes, arrow buttons, auto hide, scroll-to and snapping.
Native CSS: styles the browser’s own scrollbar with your colors and sizes. No JavaScript is loaded, so it is the fastest option.

Scripts load only on pages that use a scrollbar, and nothing is loaded from third-party servers.

Click here to see a live demo

Features include:

Gutenberg block “Custom Scrollbar” with live preview in the editor
Native CSS mode: styled scrollbars with zero JavaScript (main page and content areas)
Loads scripts only on pages that use a scrollbar
Style presets and contrast warning for readable scrollbars
Gradient bar, bar and rail borders, and a floating (overlay) look
Auto hide, also for the no-JavaScript Native CSS engine
Left-side page scrollbar (niceScroll engine) and mouse wheel step for scroll areas
Optional cursor effects (Follow, Dot, Blob, Elastic) and click effects (Spark, Spark simple, Starburst)
Save your own presets, and detect your brand colors from the site
Import, export and reset settings
Keyboard accessible scroll areas, screen reader labels and reduced-motion support
100+ scrollbar demo
Full page Scrollbar
Single Content Scrollbar
Custom Selector Scrollbar
Vertical and horizontal scrollbar support
Highly Customizable
Enable TinyMCE Button
ScrollBar scroll speed control
ScrollBar arrow button mode control
ScrollBar auto hide mode
ScrollBar auto expand mode
ScrollBar moving mode by keyboard
Shortcode Powered
Translation Ready
Responsive for all devices
All major browser supported
Easy to handle

Free and Pro

Everything listed above is free, and it stays free. Nothing in the free version will be locked.

Custom Content Scrollbar Pro is an add-on that works on top of the free plugin. It includes:

Smooth scrolling (Lenis) for the page, scroll areas and anchor links, with GSAP ScrollTrigger sync
Display conditions: change or hide the scrollbar, smooth scrolling or effects by page type, post type, category or tag, device, user role or URL
Preset library with 24 more ready-made designs
Horizontal scrolling: snap rails (ccs-rail class) and pinned horizontal sections (ccs-hscroll class)
WooCommerce pack: scrollbars for product tabs, the mini cart and filters, and product rails for related, upsell and cross-sell products
Reading progress bar and back-to-top button
More cursor effects (magnetic, trail, spotlight, invert, text label, emoji or image) and click effects (ripple, confetti, hearts, bubbles, firework, text pop)
Developer tools, and white label with the Agency license (unlimited sites)
One-time payment with lifetime updates: 1 site, 5 sites or unlimited sites
Priority support

Coming next in Pro: scrollbar controls for Bricks, Divi, WPBakery, Beaver Builder and Oxygen.

See the full comparison under Scrollbar > Free vs Pro. Get Pro under Scrollbar > Add-Ons.

Usage

Block editor

Add the Custom Scrollbar block (category: Design) and put any blocks inside it. Set the height, engine, theme, colors and behavior in the block sidebar. The editor shows a scrolling preview.

Shortcode

Use the “Custom Content Scrollbar” button above the Classic Editor, or write the shortcode yourself:

[custom-content-scrollbar height="300px" themes="dark"]Your content[/custom-content-scrollbar]

Common attributes:

engine: leave empty for mCustomScrollbar, or native for the no-JavaScript scrollbar
height, width: for example 300px, 50vh, 80%
tablet_device_width, mobile_device_horizontal, mobile_device_vertical: widths at 768px, 480px and 320px screens
axis: y (vertical), x (horizontal) or yx (both)
themes: one of the 26 theme names, for example dark, minimal-dark, rounded-dots, 3d-thick
custom_style="true" with dragger_bar_color, dragger_rail_color, dragger_bar_hover_color, dragger_bar_width, dragger_rail_width, dragger_bar_border_radius, dragger_rail_border_radius
arrow_button_mode, auto_hide_mode, auto_expand_mode: true or false
scroll_speed: scrolling momentum in milliseconds (higher is slower)
scrollbar_position: inside or outside
scroll_to_y, scroll_to_x: start position, for example 200 or bottom
snap_amount: scroll in fixed steps, in pixels
rtl: true or false
label: accessible name read by screen readers, for example label="Product list"
class: extra CSS class names

To put one scrollbar inside another, use the numbered shortcodes, such as [custom-content-scrollbar-two]. Set how many levels you need under Scrollbar > Scroll Areas > Shortcodes.

Custom selector

Under Scrollbar > Scroll Areas, enter CSS selectors (for example .sidebar, #comments) to add a scrollbar to existing parts of your theme.

Main page scrollbar

Under Scrollbar > Main Scrollbar, choose niceScroll (smooth scrolling) or Native CSS, then set the colors and sizes, or start from a preset.

Scrollbar settings for one page

Every page, post and product has its own Scrollbar settings: in the block editor sidebar, in a box on the classic edit screen, and in Elementor under Page Settings. You can:

Use the global settings (default)
Customize the main scrollbar for this page (engine, colors, width, radius, speed)
Disable the main scrollbar on this page
Add scrollbars to CSS selectors on this page only

Page builders (Elementor, Divi, Bricks, Beaver Builder, WPBakery, Oxygen and others)

Add the CSS class ccs-scroll to any section, row, column or module and give it a height (or max height). It becomes a scroll area with a styled scrollbar, without JavaScript. Use ccs-scroll-x for horizontal scrolling and ccs-scroll-both for both directions. Colors and sizes come from Scrollbar > Scroll Areas.

In Elementor, open any container, section, column or widget, go to Advanced > Scrollbar, and choose the direction, height, colors and an accessible label. It shows in the live editor.

If you use the class in theme-builder headers, footers or templates, set “Scroll area class” to “Every page”.