Customize the appearance and behavior of both scrollable containers and the browser's page scrollbar. Adjust the scrollbar width, colors, border radius, visibility, and scroll settings to match your design.
Custom scrollbar width
Custom track and thumb colors
Custom thumb hover color
Custom thumb border radius
Show or hide scrollbars
Enable or disable horizontal scrolling
Enable or disable vertical scrolling
Support for multiple independently styled container scrollbars on the same page
Optional browser page scrollbar customization
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.
Enable Customize Page Scrollbar in the component settings to customize the browser's page scrollbar. A separate set of controls will appear for configuring the page scrollbar independently from container scrollbars.
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
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.
Page scrollbar customization is optional and only applies when Customize Page Scrollbar is enabled.
Scrollbar styling support may vary between browsers.
Customize the appearance and behavior of both scrollable containers and the browser's page scrollbar. Adjust the scrollbar width, colors, border radius, visibility, and scroll settings to match your design.
Custom scrollbar width
Custom track and thumb colors
Custom thumb hover color
Custom thumb border radius
Show or hide scrollbars
Enable or disable horizontal scrolling
Enable or disable vertical scrolling
Support for multiple independently styled container scrollbars on the same page
Optional browser page scrollbar customization
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.
Enable Customize Page Scrollbar in the component settings to customize the browser's page scrollbar. A separate set of controls will appear for configuring the page scrollbar independently from container scrollbars.
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
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.
Page scrollbar customization is optional and only applies when Customize Page Scrollbar is enabled.
Scrollbar styling support may vary between browsers.
