@kizivat/svelte-autoscroll
Version:
Svelte action to automatically scroll to the end of an element.
59 lines (40 loc) • 1.34 kB
Markdown
# Svelte Autoscroll Action
Svelte action to automatically scroll to the end of an element.
See demo at https://kizivat.eu/svelte-autoscroll/.
Simply used with the `use` directive.
```html
<div use:autoscroll>...</div>
```
The above `div` will automatically scroll to the end (bottom and right) when either
1. It's children list or DOM subtree change or
2. Any of the children change their size
## Installation
```bash
npm i @kizivat/svelte-autoscroll
```
## Usage
Make sure the `autoscroll` element has overflow set to `auto` or `scroll` in at least one of the `x` or `y` directions.
```html
<script>
import autoscroll from '@kizivat/svelte-autoscroll';
</script>
<div use:autoscroll>...</div>
<style>
div {
overflow: auto;
}
</style>
```
### Arguments
The action accepts an optional argument object. You can use it to
1. modify the scroll behavior (`'smooth'` or `'auto'`, default: `'smooth'`)
2. enable `pauseOnUserScroll` feature (default: `false`)
```html
<!-- Modify default scroll behavior only -->
<div use:autoscroll={{ behavior: 'auto' }}>...</div>
<!-- Pause on user scroll -->
<div use:autoscroll={{ pauseOnUserScroll: true }}>...</div>
<!-- Both -->
<div use:autoscroll={{ pauseOnUserScroll: true, behavior: 'auto' }}>...</div>
```