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.

<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

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.

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

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