About Custom Scroll Bar
Replace the browser’s default scrollbar with one that matches your design. Add it once to your layout template and every page using it gets the new scrollbar.
Two modes, one component
Overlay: a fully custom scrollbar with a draggable rounded thumb, glow, hover-expand, click-to-scroll and auto-hide. Looks the same in Chrome, Safari, Firefox and Edge, and stays smooth on animation-heavy pages thanks to CSS scroll-driven animations (where supported).
Native: recolors the browser’s real scrollbar. The lightest option. Chrome, Edge and Safari use your thickness, radius and hover color; Firefox applies colors only.
What you can customize
Both modes
Thumb, hover and track colors
Thickness and corner radius
Overlay mode
Optional track
Glow color and size
Thumb border
Hover-to-expand width
Side, edge inset, and top/bottom offsets
Click-to-scroll and auto-hide
Minimum thumb length
Native scrollbar on touch devices (on by default)
Built to just work
No impact on scroll performance
Clean property panel grouped into Effects, Position & Advanced
Works on any Framer site, no dependencies
How to use
Copy the component into your Framer project.
Drop it inside your layout template (or each page’s top breakpoint) and set its position to Absolute. You can place it just outside the frame’s edge.
Style it from the properties panel. Done!
Good to know
Don’t hide the layer, as that turns the scrollbar off. On your live site it’s invisible and takes up no space.
It styles the main page scrollbar, not scrollable boxes inside your page.
