Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrelmlins/svelte-scroll-shadow

Component that customizes the scroll and inserts shadow when scrolling exists
https://github.com/andrelmlins/svelte-scroll-shadow

scroll shadow svelte

Last synced: 26 days ago
JSON representation

Component that customizes the scroll and inserts shadow when scrolling exists

Host: GitHub
URL: https://github.com/andrelmlins/svelte-scroll-shadow
Owner: andrelmlins
License: mit
Created: 2020-02-20T15:25:52.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2022-08-25T02:02:21.000Z (over 2 years ago)
Last Synced: 2024-06-11T18:06:18.442Z (6 months ago)
Topics: scroll, shadow, svelte
Language: Svelte
Homepage: https://svelte-scroll-shadow.netlify.com/
Size: 153 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-svelte - Svelte Scroll Shadow - Componente que personaliza a rolagem e insere sombra quando a rolagem existe. (UI Componentes / Comunidade Global)

README

        # Svelte Scroll Shadow

[![npm version](https://badge.fury.io/js/svelte-scroll-shadow.svg)](https://www.npmjs.com/package/svelte-scroll-shadow) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-scroll-shadow/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-scroll-shadow.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-scroll-shadow) • [![Dependencies](https://david-dm.org/andrelmlins/svelte-scroll-shadow.svg)](https://david-dm.org/andrelmlins/svelte-scroll-shadow) • [![Netlify Status](https://api.netlify.com/api/v1/badges/53827e2d-1e33-4e5b-a563-b05436626172/deploy-status)](https://app.netlify.com/sites/svelte-scroll-shadow/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-scroll-shadow.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-scroll-shadow/context:javascript)

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](https://github.com/sveltejs/sapper-template#using-external-components).

## Demo [Link](https://svelte-scroll-shadow.netlify.com/)

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:

```js

  import ScrollShadow from "svelte-scroll-shadow";

  


    Teste

    Teste

    Teste

    Teste

  


```

## 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

[![NPM](https://nodei.co/npm/svelte-scroll-shadow.png)](https://nodei.co/npm/svelte-scroll-shadow/)

## License

Svelte Scroll Shadow is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-scroll-shadow/blob/master/LICENSE).