ss
svelte-scrolling
npm i svelte-scrolling
ss

svelte-scrolling

Lightweight Svelte plugin to scroll to given elements with smooth animations

by Valmisson Grizorte

1.2.2 (see all)License:MITTypeScript:Built-In
npm i svelte-scrolling
Readme

Svelte Scrolling

npm license

Scroll to given elements with smooth animation.

Install

yarn add svelte-scrolling

Usage

<script>
  import { scrollTo, scrollRef, scrollTop } from 'svelte-scrolling'
</script>

<nav>
  <a use:scrollTo={'home'}>Home</a>
  <a use:scrollTo={'about'}>About</a>
  <a use:scrollTo={{ ref: 'blog', duration: 1000 }}>Blog</a>
</nav>

<section use:scrollRef={'home'}></section>
<section use:scrollRef={'about'}></section>
<section use:scrollRef={'blog'}></section>

<button on:click={() => scrollTop()}>Go to top</button>

Actions

scrollTo={reference | options}

This action listens for click (touchstart) events and scrolls to elements with smooth animation.

Accepts as parameter only the element reference or all global options:

  • ref: Element reference.

To set the global options, the ref property is required

scrollRef={reference}

This action adds a reference to the elements that scrollTo should scroll

Accepts as parameter a string with the name to reference the element

Functions

scrollTop(options?)

Scroll to the top of the page

scrollBottom(options?)

Scroll to the end of the page

scrollElement(reference, options?)

Scroll to element with smooth animation.

scrollPosition(position, options?)

Scroll to a position on the page

API

Global Options

PropertyDefaultDescription
duration500Duration (in milliseconds) of the animation.
offset0Offset that should be applied when scrolling.
easingcubicInOutEasing function to be used when animating. Use any easing from svelte/easing or a custom easing function.
onStartnoopA callback function that should be called when scrolling has started. Receives the element, offset, duration and endPosition as a parameter.
onDonenoopA callback function that should be called when scrolling has started. Receives the element, offset, duration and endPosition as a parameter.

Override global options

<script>
  import { setGlobalOptions } from 'svelte-scrolling'

  setGlobalOptions({
    duration: 800
  })
</script>

License

MIT

Copyright (c) 2021 Valmisson Grizorte

Downloads/wk

117

GitHub Stars

21

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
1.2.2
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate