Scrollbar Customizer
A Framer component to customize the appearance and behavior of scrollable containers.
Horizontal Enabled
1
2
3
4
5
6
Horizontal Disabled
1
2
3
4
5
6
Vertical Enabled
1
2
3
4
5
6
Vertical Disabled
1
2
3
4
5
6
Shown
1
2
3
4
5
6
Hidden
1
2
3
4
5
6
Colors Changed
1
2
3
4
5
6
Width Changed
1
2
3
4
5
6
Radius Changed
1
2
3
4
5
6
How to Use
Add the Scrollbar Customizer component to your page.
Enter a unique Custom Class Name in the component settings.
Apply the matching class name override to the scrollable container you want to customize.
Adjust the scrollbar settings to match your design.
To style multiple scrollable containers differently, add additional Scrollbar Customizer components and assign a different class name to each one.
Code Override
This component uses class names to target scrollable containers. To get the code override used to apply a custom class name to a container, simply remix the Scrollbar Customizer Demo Project.
Demo Project Remix Link: https://framer.link/KP0XH17
The demo project also includes a Page Scrollbar Customizer component. It customizes the browser's page scrollbar using global CSS. Because of this, it is not suitable for publication to the Framer Marketplace under the current review guidelines. By using that component, you acknowledge that it applies global CSS to the page.
Notes
Container scrollbar customization requires a matching class name applied through the provided code override.
The target container must have scrolling enabled for the scrollbar to appear.
Scrollbar styling support may vary between browsers.