Native Smooth Scroll Save

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:

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

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);
});