CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロール ...

従来、スクロールに応じたアニメーションやコンテンツ表示の切り替えといえば、JavaScript（特にIntersectionObserverやスクロールイベント）が必要不可欠でした。 しかし、近年のCSS仕様の進化によって、JavaScriptを使わずにスクロールトリガーのような効果を ...

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホの ...

CSS のscroll-behavior: smoothを使用するだけで簡易的なスムーズスクロールをJavaScriptを利用せずに実現できる。しかし、このscroll-behaviorを利用したスムーズスクロールが有効にならないケースがあった。 CSS でスムーズスクロールを有効化するために、scroll-behavior ...

固定ヘッダがあるページで、ページ内リンクをクリックすると、リンク先のコンテンツがヘッダに隠れてしまうことがある。また、スクロールスナップ（スクロール時に特定の位置で自動的に止まる機能）を使う際も、停止位置のずれという問題が発生する。

ページ内のアンカーに飛ぶ際、シュルシュルーと画面がスクロールして目的の場所までスクロールしてくれる『スムーススクロール』は色んなサイトで使われているのでよく目にすると思います。 従来の実装は JavaScript でしていたわけですが、CSS だけでも ...