Smooth Scroll
スムーススクロール
どんな動き？
通常のカクカクしたブラウザ標準スクロールの代わりに、慣性を加えて減速の尾を引きながらスクロールを止めるアニメーション。指を離した後もスーッと余韻を持って進み続けるため、サイト全体の操作感が上質でなめらかな印象になる。Lenisというライブラリを使って実装するのが近年の定番で、ブランドサイトやポートフォリオサイトの土台としてよく採用される。
よく使う場所
ポートフォリオサイトブランドサイトLP全体
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Replace native scrolling with an inertia-damped scroll that keeps gliding and decelerates smoothly to a stop.Trigger:
Any scroll input (wheel, trackpad, touch) across the whole page.
Start:
The user applies scroll input; the page begins moving toward the new scroll target.
End:
Input stops; the page continues gliding for a moment and settles with a long, smooth deceleration tail.
Behavior:
The page's scroll position is lightly damped and lags behind raw input, so it doesn't snap 1:1 like scrub — instead it eases toward the target continuously, producing a heavier, more fluid feel than native scrolling.
Initial state:
scroll position: current, moving at input speed
Final state:
scroll position: settled at the target, velocity: 0実装方法の候補
この動きは以下の技術で実装できます。
LenisLocomotive ScrollGSAP ScrollSmoother
別名・関連ワード
Inertia ScrollSmooth ScrollingMomentum Scroll