Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sveltejs/svelte-scroller
A <Scroller> component for Svelte apps
https://github.com/sveltejs/svelte-scroller
Last synced: about 1 month ago
JSON representation
A <Scroller> component for Svelte apps
- Host: GitHub
- URL: https://github.com/sveltejs/svelte-scroller
- Owner: sveltejs
- License: other
- Created: 2018-05-02T22:10:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-03T23:31:58.000Z (11 months ago)
- Last Synced: 2024-04-14T16:06:23.941Z (7 months ago)
- Language: Svelte
- Homepage: https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6
- Size: 51.8 KB
- Stars: 340
- Watchers: 6
- Forks: 26
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - sveltejs/svelte-scroller - A <Scroller> component for Svelte apps (others)
README
# svelte-scroller ([demo](https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6?version=3))
A scroller component for Svelte apps.
## Installation
```bash
yarn add @sveltejs/svelte-scroller
```
## Usage
```html
import Scroller from "@sveltejs/svelte-scroller";
let index, offset, progress;
section {
height: 80vh;
}
This is the background content. It will stay fixed in place while the
foreground scrolls over the top.
Section {index + 1} is currently active.
This is the first section.
This is the second section.
This is the third section.
```
You must have one `slot="background"` element and one `slot="foreground"` element — see [composing with <slot>](https://svelte.dev/tutorial/slots) for more info.
## Parameters
The following parameters are available:
| parameter | default | description |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| top | 0 | The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height |
| bottom | 1 | The inverse of `top` — once the bottom of the foreground passes this point, the background becomes unfixed |
| threshold | 0.5 | Once a section crosses this point, it becomes 'active' |
| query | 'section' | A CSS selector that describes the individual sections of your foreground |
| parallax | false | If `true`, the background will scroll such that the bottom edge reaches the `bottom` at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly |
## `index`, `offset`, `progress` and `count`
By binding to these properties, you can track the user's behaviour:
- `index` — the currently active section
- `offset` — how far the section has scrolled past the `threshold`, as a value between 0 and 1
- `progress` — how far the foreground has travelled, where 0 is the top of the foreground crossing `top`, and 1 is the bottom crossing `bottom`
- `count` — the number of sections
You can rename them with e.g. `bind:index={i}`.
## Configuring webpack
If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component (`src/index.html`) rather than the compiled version (`index.mjs`) — this is more efficient.
If you're using Rollup with [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.
## License
[LIL](LICENSE)