martinlaxenaire / native-smooth-scroll

Native smooth scroll

Native smooth scroll

Initializing

import {SmoothScroll} from './src/native.smooth.scroll.js';

const smoothScroll = new SmoothScroll({
    container: document.querySelector(".container"),
});

In a browser, you can use the UMD files located in the dist directory:

<script src="dist/native.smooth.scroll.umd.js"></script>

const smoothScroll = new SmoothScroll({
    container: document.querySelector(".container"),
});

Parameters

Here are the basic parameters that you can specify:

Parameter	Type	Default	Description
container	HTML node	document.body	container that will be fixed and translated to according scroll values
inertia	float	0.1	Easing value
threshold	float	0.5	Threshold to stop the easing animation, in pixels
useRaf	bool	false	Whether to use the built-in requestAnimationFrame callback.

const smoothScroll = new SmoothScroll({
    // container that will be translated
    container: document.getElementById("content"),
    // round the threshold to 1 pixel
    threshold: 1, 
    // use built-in raf loop
    useRaf: true
});

Methods

Name	Description
resize	Should be called in a window resize event to update the values
update	Should be called to update internal values when the document height changed
scrollTo	Immediately scroll to a defined position
render	Update our current scroll and velocity values, translate the container and emit our onScroll event. Should be called at each tick of a requestAnimationFrame callback if useRaf is set to false

const smoothScroll = new SmoothScroll({
    // container that will be translated
    container: document.getElementById("content"),
    // round the threshold to 1 pixel
    threshold: 1, 
    // use built-in raf loop
    useRaf: true
});

window.addEventListener("resize", () => {
    smoothScroll.resize();
});

onScroll callback

const smoothScroll = new SmoothScroll({
     // container that will be translated
     container: document.getElementById("content"),
     // round the threshold to 1 pixel
     threshold: 1, 
     // use built-in raf loop
     useRaf: true
});

smoothScroll.onScroll((scroll) => {
    // an object containing the current scroll value, the target scroll value and the velocity value
    console.log(scroll);
});