Svelte Scroll Shadow
Component that customizes the scroll and inserts shadow when scrolling exists
Svelte Scroll Shadow
Component that customizes the scroll and inserts shadow when scrolling exists
Installation
npm i svelte-scroll-shadow
// OR
yarn add svelte-scroll-shadow
Note: to use this library in sapper, install as devDependency. See the link.
Demo Link
Local demo:
git clone https://github.com/andrelmlins/svelte-scroll-shadow.git
cd svelte-scroll-shadow
npm install && npm run dev
Examples
An example of how to use the library:
<script>
import ScrollShadow from "svelte-scroll-shadow";
</script>
<ScrollShadow>
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li>
</ul>
</ScrollShadow>
Properties
Component props:
| Prop | Default | Type | Description |
|---|---|---|---|
| scrollColor | #c5c5c5 | string | Scroll color |
| scrollColorHover | #a6a6a6 | string | Scroll color when hover |
| scrollWidth | 5 | number | Scroll Width |
| scrollPadding | 0 | number | Left scroll padding |
| isShadow | true | boolean | View shadow |
| shadow | '0 2px 4px rgba(0, 0, 0, 0.2) inset, 0 -2px 4px rgba(0, 0, 0, 0.2) inset' | string | Shadow |
NPM Statistics
Download stats for this NPM package
License
Svelte Scroll Shadow is open source software licensed as MIT.
