svelte-simplebar

A Svelte wrapper for SimpleBar

Installation

Npm

npm install --save @woden/svelte-simplebar

Yarn

yarn add @woden/svelte-simplebar

Basic Usage

<script>
import SimpleBar from '@woden/svelte-simplebar'
</script>

<SimpleBar style="height: 200px; width: 200px">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</SimpleBar>

Props

| Name | Type | Description | Default value | | ---- | ---- | ----------- | ------------- | | autoHide | Boolean | Lorem ipsum dolor sit amet | true | | scrollbarMinSize | Number | Define the minimum scrollbar size in pixels. | 10 | | scrollbarMaxSize | Number | Define the maximum scrollbar size in pixels. | 0 | | classNames | Object | It is possible to change the default class names that SimpleBar uses. To get your own styles to work refer to simplebar.css to get an idea how to setup your css. For more informations | { content: 'simplebar-content', scrollContent: 'simplebar-scroll-content', scrollbar: 'simplebar-scrollbar', track: 'simplebar-track' } | | forceVisible | Boolean | You can force the track to be visible (same behaviour as overflow: scroll) using the forceVisible option. | false | | direction | String | You can activate RTL support by passing the direction option | 'ltr' | | timeout | Number | Define the delay until the scrollbar hides. Has no effect if autoHide is false. | 1000 | | clickOnTrack | Boolean | Controls the click on track behaviour. | true | | class | String | Apply one or more css class(es) on the component | none | | style | String | Apply css inline styles on the component | none |

Events

| Name | Description | | ---- | ----------- | | scrollXReachStart | This event fires when scrolling reaches the start of the x-axis. | | scrollXReachEnd | This event fires when scrolling reaches the end of the x-axis. | | scrollYReachStart | This event fires when scrolling reaches the start of the y-axis. | | scrollYReachEnd | This event fires when scrolling reaches the end of the y-axis. |