Scrollbar
Default Scroll
Just use data attribute data-simplebar
and add max-height: **px
oh fix height
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 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 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 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>