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
yarn && yarn start

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.