- Notifications
You must be signed in to change notification settings - Fork8
utherpally/svelte-scrollto
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Animating vertical and horizontal scrolling
npm install --save-dev svelte-scrollto# oryarn add -D svelte-scrollto<script>import*asanimateScrollfrom"svelte-scrollto";</script><aon:click={() => animateScroll.scrollToBottom()}> Scroll to bottom</a><aon:click={() => animateScroll.scrollToTop()}> Scroll to top</a><aon:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector'})}> Scroll to element</a><aon:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector', offset: 200})}> Scroll to below element 200px</a><aon:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector', duration: 2000})}> Scroll to element over 2000ms</a>
Using as a action
<script>import{scrollto}from"svelte-scrollto";</script><!-- Parameter is element selector or options --><ause:scrollto={'#scroll-element'}> Scroll to element</a>
| Option | Required | Default value | Description |
|---|---|---|---|
container | ✔ | "body" | Scroll container |
duration | ✔ | 500 | The duration (in milliseconds) of the scrolling animation. |
delay | 0 | ||
offset | 0 | The offset that should be applied when scrolling. This option accepts a callback function | |
easing | cubicInOut | The easing function to be used when animating. Can pass any easing fromsvelte/easing or pass custom easing function. | |
onStart | noop | A callback function that should be called when scrolling has started. Receives the target element and page offset as a parameter. | |
onDone | noop | A callback function that should be called when scrolling has ended. Receives the target element and page offset as a parameter. | |
onAborting | noop | A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.). Receives the target element and page offset as parameters. | |
scrollX | false | Whether or not we want scrolling on thex axis | |
scrollY | true | Whether or not we want scrolling on they axis |
Override global options:
import*asanimateScrollfrom"svelte-scrollto";animateScroll.setGlobalOptions({offset:200,onStart:(element,offset)=>{if(element){console.log("Start scrolling to element:",element);}elseif(offset){console.log("Start scrolling to page offset: (${offset.x}, ${offset.y})");}}})
Accepts all global options and:
element: The element you want scroll tox: The offset we want to scrolling on the x axisy: The offset we want to scrolling on the y axis
Shortcut of use scrollTo withx equal to0.
Shortcut of use scrollTo withx equal tocontainerHeight
Svelte action that listens forclick (touchstart) events and scrolls to elements with animation.
scrolltoscrolltotopscrolltobottom
If you want to use Lazy and want to scroll to elements, you need to give your lazy components (images, v.v..) fixed dimensions, so the browser known the size of the not loaded elements before scrolling.
About
Animating vertical and horizontal scrolling. Inspired by rigor789/vue-scrollto and uses some of its code and functionality!!
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.