---
title: "Scrollbar Customizer — Free Framer component · Best of Framer"
description: "Free Framer component · by Vibiniks · Interactive. Features Custom scrollbar width Custom track and thumb colors Custom thumb hover color Custom thumb border radius Show or hide scrollbars…"
canonical: "https://framer.elliotli.dev/component/scrollbar-customizer"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scrollbar Customizer

# Scrollbar Customizer

Custom Scrollbar for Containers

[View on Framer](https://framer.com/marketplace/components/scrollbar-customizer/?via=elliot-li)

![Scrollbar Customizer preview image 1](https://framer.elliotli.dev/og/component/scrollbar-customizer/5d60af5b045f1a88/1600x1200.jpg)

## Summary

Features 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…

## Description

Customize the appearance and behavior of scrollable containers. Adjust the scrollbar width, colors, border radius, visibility, and scroll settings to match your design.

## Features

-   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 scrollable containers on the same page
    

## How to Use

1.  Add the Scrollbar Customizer component to your page.
    
2.  Enter a unique **Custom Class Name** in the component settings.
    
3.  Apply the matching class name override to the scrollable container you want to customize.
    
4.  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](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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4347

## Details

- **Author**: Vibiniks
- **Published**: 2026-06-25
- **Updated**: 2026-06-27
- **Added**: 2026-06-25
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase