こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆様、オシャレなサイトは好きでしょうか。
私個人の感覚ですが、
最近、慣性が効いたスクロールを実装しているオシャレなサイトが増えている気がしてます。

今回は、そんなオシャレなサイトで流行っている、慣性が効いたスクロールtipsを紹介します。

実装例

実はこのページで実装しています！
他のページと見比べてみてください。
少し慣性がかかっていますよね。

JavaScript例

let currentY = 0;
let targetY = 0;
const ease = 0.04;
window.addEventListener('wheel', (e) => {
  e.preventDefault();
  targetY += e.deltaY;
  const maxScroll = document.body.scrollHeight - window.innerHeight;
  targetY = Math.max(0, Math.min(targetY, maxScroll));
}, { passive: false });
function animate() {
  currentY += (targetY - currentY) * ease;
  window.scrollTo(0, currentY);
  requestAnimationFrame(animate);
}
animate();

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！