The Smooth Scroll class enhances the user experience by implementing fluid, inertia-based scrolling behavior. This reduces the harsh jumps typically seen in default scroll actions, providing a seamless scrolling effect across the page. The system dynamically adjusts the scroll position based on user input, gradually easing to the target position.
ease (default: 0.075) – Controls the scroll easing. Lower values result in
slower
easing.threshold (default: 0.5) – Minimum difference required between current and
target
scroll to continue easing.enableTouch (default: false) – Enables touch-based scrolling.touchSensitivity (default: 2) – Adjusts the responsiveness of touch scroll.
Higher
values increase the movement.import SmoothScroll from './others/smooth_scroll/smooth_scroll.js';
const smoothScroll = new SmoothScroll({
ease: 0.08,
threshold: 0.5,
enableTouch: true,
touchSensitivity: 2
});
Smooth Scroll listens for wheel, keyboard, and touch events. When triggered, it prevents the default
behavior
and calculates the target scroll position. The requestAnimationFrame loop incrementally adjusts
the
scroll,
easing towards the target until the difference falls below the threshold. This ensures a polished and
responsive
interaction.
To disable Smooth Scroll and restore default scrolling, call the destroy() method.
This removes all event listeners and cancels any active animation frames.
smoothScroll.destroy();