howard-smoothscroll v1.0.6
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.