Howard SmoothScroll ⚡️

Vue3 smooth scroll based on lenis made by @studio-freight

npm install howard-smoothscroll

Basic usage

<template>
    <div id="app">
        <div class="container" data-scrollable>
            <h1>My App</h1>
            <p>My app is awesome</p>
            <span>So as this smoothScroll</span>
        </div>
    </div>
</template>

<script>
    import { useSmoothScroll } from "howard-smoothscroll";
    const smoothScroll = useSmoothScroll();
</script>

data-scrollable is the attribute that will be used to identify the scrollable area.

Options

const smoothScroll = useSmoothScroll({
    damping: <Number>, // Default: 0.1 (The higher the value, the more the scroll will be brutal)
    direction: <String>, // Default: 'vertical',

    /* Virual scroll parameters (optional) */
    // globalMult = .25
    mouseMultiplier: <Number>, // Default: 1 * globalMult
    touchMultiplier: <Number>, // Default: 8 * globalMult (iPad touch)
    desktopDragMultiplier: <Number>, // Default: 8 * globalMult (Desktop drag)
    firefoxMultiplier: <Number>, // Default: 15 * globalMult (Firefox wheel)
    windowsMultiplier: <Number>, // Default: 15 * globalMult (Windows wheel)
    keyStep: <Number>, // Default: 120
    preventTouch: <Boolean>, // Default: true
    unpreventTouchClass: <String>, // Default: 'vs-touchmove-allowed' (used to disabled touchmove on specific elements)
    useKeyboard: <Boolean>, // Default: false
    useTouch: <Boolean>, // Default: false
    passive: <Boolean>, // Default: false
});

Methods

smoothScroll.scrollTo(<Number> || <String> || <HTMLElement>, { offset: <Number> });

Scroll to a specific position (in pixels) or to an element. You can also add an offset to the scroll position.

smoothScroll.start();

Start the scroll.

smoothScroll.stop();

Stop the scroll.

smoothScroll.refresh();

Refresh the scroll. Useful when the scrollable area changes. Fired automatically on window resize.

Getters

smoothScroll.stopped = <Boolean>

If true, the scroll is stopped.

smoothScroll.complete = <Promise>

Resolved when the scroll is complete.

smoothScroll.el = <HTMLElement>

The scrollable area.

smoothScroll.parent = <HTMLElement>

The parent of the scrollable area.

smoothScroll.scroll = <Number>

The current scroll position.

smoothScroll.limit = <Number>

The maximum scroll position.

smoothScroll.velocity = <Number>

The current scroll velocity.

smoothScroll.direction = <String>

The current scroll direction.

smoothScroll.isMoving = <Boolean>

If true, the scroll is moving.

smoothScroll.isScrollingTo = <Boolean>

If true, the scroll is scrolling to a specific position.

Setters

smoothScroll.stopped = <Boolean>

If true, stop the scroll.

smoothScroll.damping = <Number>

The higher the value, the more the scroll will be brutal.

Events

smoothScroll.on((virualScroll, e) => {
    // const { scroll, limit, velocity, ...etc } = e;
});

Fired when the scroll is updated.