慣性スクロールライブラリ Lenis

official

https://lenis.studiofreight.com/
https://github.com/darkroomengineering/lenis

npm package

$ npm i lenis

usage

import Lenis from 'lenis'

interface Window {
  lenis: Lenis;
}

const lenis = new Lenis({
  lerp: 0.1,
  duration: 1.0,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  gestureOrientation: 'vertical',
  smoothWheel: true,
  smoothTouch: false,
  touchMultiplier: 2,
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

window.lenis = lenis;

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    window.lenis.scrollTo(anchor.getAttribute('href'), {
      duration: 0.4,
    })
  });
});

スクロールバーを表示(機能)させたい要素に属性を指定

<div data-lenis-prevent></div>