https://github.com/melihaltintas/svelte-slimscroll
https://github.com/melihaltintas/svelte-slimscroll
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/melihaltintas/svelte-slimscroll
- Owner: MelihAltintas
- Created: 2020-11-05T15:13:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-25T21:35:44.000Z (over 4 years ago)
- Last Synced: 2025-05-01T15:16:20.030Z (5 months ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 48
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-slimscroll
svelte-slimscroll is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
**Demo**: https://svelte.dev/repl/e8dcf07c3f3c4573a62ec289b1958005?version=3.29.4.
[](https://github.com/MelihAltintas/svelte-slimscroll/stargazers)
## Install
- Install it by using npm.
```
npm i svelte-slimscroll
```
- Import it at `svelte` project.
``` js
import {slimscroll} from "svelte-slimscroll"
```
## Usage
Using the `slimscroll` action
``` html
...
```
Using action with options
``` html
...
import {slimscroll} from "svelte-slimscroll"
```
> The `options` is same as jQuery version. See their [documentation](http://rocha.la/jQuery-slimScroll)
Options
-------
* **width** - width in pixels of the visible scroll area Default: auto
* **height** - Height in pixels of the visible scroll area. Default: 250px
* **size** - Width in pixels of the scrollbar. Default: 7px
* **color** - Color in hex of the scrollbar. Default: #000
* **position** - left or right. Sets the position of the scrollbar. Default: right
* **distance** - distance in pixels between the side edge and the scrollbar It is used together with position property. Default:1px
* **start** - default scroll position on load - top / bottom / $('selector'). Default: top.
* **opacity** - sets scrollbar opacity. Default: 0.4.
* **alwaysVisible** - Disables scrollbar hide. Default: false
* **disableFadeOut** - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false
* **railVisible** - Enables scrollbar rail. Default: false
* **railColor** - Sets scrollbar rail color, Default: #333
* **railOpacity** - Sets scrollbar rail opacity. Default: 0.2
* **railClass** - defautlt CSS class of the slimscroll rail. Default: 'slimScrollRail'
* **barClass** - defautlt CSS class of the slimscroll bar. Default: 'slimScrollBar'
* **wrapperClass** - defautlt CSS class of the slimscroll wrapper. Default: 'slimScrollDiv'
* **allowPageScroll** - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false
* **wheelStep** - Integer value for mouse wheel delta. Default: 20
* **touchScrollStep** - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200
* **borderRadius** - sets border radius.Default: 7px
* **railBorderRadius** - sets border radius of the rail.Default: 7px
## License
[MIT](http://opensource.org/licenses/MIT)