#### Scrollbar

#### Default Scroll

Just use data attribute `data-simplebar` and add `max-height: **px` oh fix height

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollbar!

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native `overflow: auto` scroll and only replace the scrollbar visual appearance.

##### Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

##### Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

##### Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

                                                        <!-- HTML -->
                                                        <div data-simplebar style="max-height: 250px;">
                                                        </div>

#### RTL Position

Just use data attribute `data-simplebar data-simplebar-direction='rtl'` and add `max-height: **px` oh fix height

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollbar!

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native `overflow: auto` scroll and only replace the scrollbar visual appearance.

##### Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

##### Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

##### Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

                                                        <!-- HTML -->
                                                        <div data-simplebar data-simplebar-direction='rtl' style="max-height: 250px;">
                                                        </div>

#### Scroll Size

Just use data attribute `data-simplebar` and add `max-height: **px` oh fix height

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollbar!

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native `overflow: auto` scroll and only replace the scrollbar visual appearance.

##### Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

##### Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

##### Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

                                                        <!-- HTML -->
                                                        <div data-simplebar data-simplebar-lg style="max-height: 250px;">
                                                        </div>

#### Scroll Color

Just use data attribute `data-simplebar data-simplebar-primary` and add `max-height: **px` oh fix height

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollbar!

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native `overflow: auto` scroll and only replace the scrollbar visual appearance.

##### Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

##### Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

##### Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

                                                        <!-- HTML -->
                                                        <div data-simplebar data-simplebar-primary style="max-height: 250px;">
                                                        </div>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now