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.