Animating vertical and horizontal scrolling

Last update: May 23, 2022

Svelte-scrollto

Animating vertical and horizontal scrolling

Install

npm install --save-dev svelte-scrollto
# or
yarn add -D svelte-scrollto

Usage

animateScroll.scrollToBottom()}> Scroll to bottom animateScroll.scrollToTop()}> Scroll to top animateScroll.scrollTo({element: 'scroll-to-element-selector'})}> Scroll to element animateScroll.scrollTo({element: 'scroll-to-element-selector', offset: 200})}> Scroll to below element 200px animateScroll.scrollTo({element: 'scroll-to-element-selector', duration: 2000})}> Scroll to element over 2000ms ">
<script>
  import * as animateScroll from "svelte-scrollto";
script>

<a on:click={() => animateScroll.scrollToBottom()}> Scroll to bottom a>
<a on:click={() => animateScroll.scrollToTop()}> Scroll to top a>
<a on:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector'})}> Scroll to element a>
<a on:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector', offset: 200})}> Scroll to below element 200px a>
<a on:click={() => animateScroll.scrollTo({element: 'scroll-to-element-selector', duration: 2000})}> Scroll to element over 2000ms a>

Using as a action

Scroll to element ">
<script>
  import { scrollto } from "svelte-scrollto";
script>

<a use:scrollto={'#scroll-element'}> Scroll to element a>

API

Global Options

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 from svelte/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 the x axis
scrollY true Whether or not we want scrolling on the y axis

Override global options:

{ if(element) { console.log("Start scrolling to element:", element); } else if(offset) { console.log("Start scrolling to page offset: (${offset.x}, ${offset.y})"); } } })">
import * as animateScroll from "svelte-scrollto";

animateScroll.setGlobalOptions({
	offset: 200,
	onStart: (element, offset) => {
		if(element) {
			console.log("Start scrolling to element:", element);
		} else if(offset) {
			console.log("Start scrolling to page offset: (${offset.x}, ${offset.y})");
		}
	}
})

Functions

scrollTo(options)

Accepts all global options and:

  • element: The element you want scroll to
  • x: The offset we want to scrolling on the x axis
  • y: The offset we want to scrolling on the y axis

scrollToTop(options)

Shortcut of use scrollTo with x equal to 0.

scrollToBottom(options)

Shortcut of use scrollTo with x equal to containerHeight

Actions

Svelte action that listens for click (touchstart) events and scrolls to elements with animation.

  • scrollto

  • scrolltotop

  • scrolltobottom

Troubleshooting

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.

GitHub

https://github.com/langbamit/svelte-scrollto
Comments
  • 1. Publish new npm release

    I fixed an issue (#1 / #2 / #3 ) in a PR that you merged, much appreciated.

    It would be great if you could publish a new version to npm, so everyone using this package (me included) can benefit from installing directly from there. I've just been installing the latest commit from github via npm in the meantime.

    Thanks for the great work on the lib!

    Reviewed by chrisbrown-io at 2020-06-23 16:09
  • 2. Remove `import * as...` statement to enable SSR usage

    Fixes #1.

    Removed ability to set easing using a string name, must be passed as function now. This removes the need for the import * as easings from "svelte/easing" statement.

    This will allow the library to be used within bundlers that don't support the import * as syntax.

    My use case was with Sapper, as with #1.

    This should resolve this scenario!

    Reviewed by chrisbrown-io at 2020-06-10 17:32
  • 3. Issue when Deploying to Netflify

    It works fine in development but when i try to deploy it fails with this message

    6:01:38 AM: /opt/build/repo/node_modules/svelte-scrollto/src/index.js:1 6:01:38 AM: import * as easings from "svelte/easing"; 6:01:38 AM: ^ 6:01:38 AM: SyntaxError: Unexpected token * 6:01:38 AM: at Module._compile (internal/modules/cjs/loader.js:723:23) 6:01:38 AM: at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 6:01:38 AM: at Module.load (internal/modules/cjs/loader.js:653:32) 6:01:38 AM: at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 6:01:38 AM: at Function.Module._load (internal/modules/cjs/loader.js:585:3) 6:01:38 AM: at Module.require (internal/modules/cjs/loader.js:692:17) 6:01:38 AM: at require (internal/modules/cjs/helpers.js:25:18) 6:01:38 AM: at Object. (/opt/build/repo/sapper/build/server/server.js:1:1554) 6:01:38 AM: at e (/opt/build/repo/sapper/build/server/server.js:1:124) 6:01:38 AM: at Module. (/opt/build/repo/sapper/build/server/server.js:1:19876) 6:01:43 AM: > timed out waiting for connection`

    It was installed using npm maybe trying yarn will work

    Reviewed by KnightWebnApps at 2019-12-02 11:07
  • 4. Make svelte-scrollto SSR ready

    Hi, thanks for your work. When using svelte-scrollto with Sapper, the build fails because of import * as easings from "svelte/easing".

    It's possible to get around this using dynamic import:

    import { onMount } from "svelte";
    
    let animateScroll;
    
    onMount(async () => {
      animateScroll = await import("svelte-scrollto");
    });
    

    But it would be better to have this plugin SSR ready.

    Reviewed by liborvanek at 2019-08-23 04:59
  • 5. Delay before actually scrolling?

    Hi! This product is really great! But i see one issue, when i press the button there is a delay where its scrolling but not at the rate thats optimal. aka really sluggish. But then after a second it works like normal. Is that a known bug? Can you guys look into it?

    Reviewed by vincent-thomas at 2021-09-02 20:17
  • 6. Typescript Support

    As more and more people are using svelte with typescript it would be cool if you could provide a declaration file so people can use this in typescript projects aswell.

    Reviewed by Alfagun74 at 2021-06-17 23:32
  • 7. bugfix: adds scroll listeners for aborting

    This adds scroll listeners for aborting the animated scroll. I noticed when using this package that scrolling or clicking during animation didn't do anything and onAborting always ran after onDone, even if no scroll events fired.

    In keeping with your inspiration for this, I used the same set-up as vue-scrollto (here and here.)

    Here is a REPL with these changes that shows it working now: https://svelte.dev/repl/8d1798a853ba42988fee278a9bc29b36?version=3.35.0

    Let me know if anything is off and I'll change it. Thanks!

    Also, thanks for creating this! It's great!

    Reviewed by kindoflew at 2021-03-27 14:54
  • 8. An option to not over-scroll even when there is an offset

    It would be nice if you could add an option to not over-scroll even when there is an offset, if limits of the container is reached. Sometimes there is a need for the offset, but only if there is space to scroll more because if there isn't any space left to scroll, a glitch like behaviour happens where it tries to over-scroll for a split second and fails. Then the div goes back to its expected position.

    In addition, an option to not scroll at all if the element is fully visible would be nice too. It can also work with the offset hopefully, so that if the element is visible including its offset, it doesn't scroll.

    Thanks for the awesome plugin btw.

    Reviewed by yekta at 2020-11-01 15:43
  • 9. import cubicInOut server crashed

    Hi,

    I am running npm run dev with Sapper / Svelte, I have installed your scroll to package via NPM but keep getting this issue:

    /home/XXXX/node_modules/svelte-scrollto/src/index.js:1
    import { cubicInOut } from "svelte/easing";
           ^
    
    SyntaxError: Unexpected token {
        at Module._compile (internal/modules/cjs/loader.js:723:23)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
        at Module.load (internal/modules/cjs/loader.js:653:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
        at Function.Module._load (internal/modules/cjs/loader.js:585:3)
        at Module.require (internal/modules/cjs/loader.js:692:17)
        at require (internal/modules/cjs/helpers.js:25:18)
        at Object.<anonymous> (/home/XXXX/__sapper__/dev/server/server.js:8:1)
        at Module._compile (internal/modules/cjs/loader.js:778:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    > Server crashed
    
    Reviewed by mrbenosborne at 2020-10-21 12:08
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

May 14, 2022
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Aug 8, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Aug 5, 2022
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

Aug 11, 2022
Component that customizes the scroll and inserts shadow when scrolling exists
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

Feb 13, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Aug 5, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Jul 31, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Mar 2, 2022
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Jul 10, 2022
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

Aug 3, 2022
Starter template for parallax effects & smooth scrolling experience
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Aug 16, 2022
⚡️ Blazing fast scrolling for any amount of data
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Aug 12, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Jul 31, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

May 10, 2022
↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

May 19, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Jul 10, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

Jul 21, 2022
Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

vue-slidePage Introduction vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage Demo simple custom Usage Install $ npm i -S

Nov 12, 2021
⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Aug 3, 2022