native-smooth-scroll
native-smooth-scroll copied to clipboard
martinlaxenaire
Native smooth scroll
trafficstars
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);
});
martinlaxenaire