svrollbar


svrollbar is the custom scrollbar made by svelte.

- how to install
- examples
- how to use
- replace window scrollbar
- make scrollble area
- replace overflow-based scrollbar
- integrate 3rd party libraries
- components spec
- how to customize transition
- how to customize style
- how to customize scrollbar visibility

how to install

``bash
npm install svrollbar
`

examples

example website is here

example svelte REPL is here.

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.

$3

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
to see the live example.

$3

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)}


on the other hand, it is better to use Svrollbar.svelte
if you already have a kind of scrollable viewport or contents.

`svelte



`

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.

$3

if you would like to integrate svrollbar into some kind of virtual list
implemenation such as
svelte-virtual-list
or
svelte-tiny-virtual-list,
you can do that in the following way.

`svelte



`

components spec

see here.

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


width="10rem"
height="10rem"
vTrackIn={flyLeft}
vTrackOut={flyLeft}
vThumbIn={flyRight}
vThumbOut={flyRight}>
{#each items as item (item)}


`svelte



`

how to customize scrollbar visibility

you can customize scrollbar visibility with alwaysVisible and initiallyVisible` properties.

| property | default | description |
| ---------------- | ------- | ------------------------------------ |
| alwaysVisible | false | scrollbar is always visible |
| initiallyVisible | false | scrollbar is visible until scrolling |