# svrollbar
[](https://badge.fury.io/js/svrollbar)
[](https://opensource.org/licenses/MIT)
[](https://github.com/daylilyfield/svrollbar/actions)
[](https://coveralls.io/github/daylilyfield/svrollbar?branch=main)
svrollbar is the custom scrollbar made by svelte.
- [how to install](#how-to-install)
- [examples](#examples)
- [how to use](#how-to-use)
- [replace window scrollbar](#replace-window-scrollbar)
- [make scrollble area](#make-scrollable-area)
- [replace overflow-based scrollbar](#replace-overflow-based-scrollbar)
- [integrate 3rd party libraries](#integrate-3rd-party-libraries)
- [components spec](#components-spec)
- [how to customize transition](#how-to-customize-transition)
- [how to customize style](#how-to-customize-style)
- [how to customize scrollbar visibility](#how-to-customize-scrollbar-visibility)
## how to install
```bash
npm install svrollbar
```
## examples
example website is [here](https://daylilyfield.github.io/svrollbar/)
example svelte REPL is [here](https://svelte.dev/repl/d600db3bde4742ec8d9751e009d94159?version=3.35.0).
## how to use
svrollbar has two components; `Svrollbar.svelte` and `Svroller.svelte`.
svrollbar is supposed to use with svelte,
but if you want, you can use svrollbar without svelte.
### replace window scrollbar
if you would like to customize your window scrollbar,
you simply write down `Svrollbar.svelte` with empty properties,
```svelte
```
this is equivalent to:
```svelte
```
yes, you can see the customized scrollbar on the right side of your browser window.
please watch out [example website](https://daylilyfield.github.io/svrollbar/)
to see the live example.
### make scrollable area
if you try to make scrollable area within a part of your web site,
you may prefer to use `Svroller.svelte`.
the below example shows you the list which has 50 rows
in a 10rem x 10rem square scrollable area with the custom scrollbar.
```svelte
{#each items as item (item)}
{item}
{/each}
```
### replace overflow-based scrollbar
on the other hand, it is better to use `Svrollbar.svelte`
if you already have a kind of scrollable viewport or contents.
```svelte
{#each items as item (item)}
{item}
{/each}
```
notice, you do not need to specify fixed value to width or height of viewport.
you can set min-\*, max-\*, and any dynamic and reactive value because
svrollbar observes both viewport size and its content size by ResizeObserver.
### integrate 3rd party libraries
if you would like to integrate svrollbar into some kind of virtual list
implemenation such as
[svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list)
or
[svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list),
you can do that in the following way.
```svelte
{items[index]}
```
## components spec
see [here](./COMPONENT_INDEX.md).
## how to customize transition
since the simple fade animation is really a bore,
you can replace the default fade (show/hide) animation with your one.
the transition function is compatible with the svelte transition.
```svelte
{#each items as item (item)}
