Skip to content

martinlaxenaire/native-smooth-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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