Scrollspy example

これは何?

モバイル用のスクロールスパイのサンプルです。

スクロールスパイはよくサイドバーの目次として表示されますが、モバイルの場合は普通サイドバーを作らないので、スクロールスパイもあまり目にすることがありません。

そこで、この例のように、上部固定で、内容が変わっていくという形ならば広く使えるのではないかと思い付いたので、その提案です。

作った動機

Intersection Observer を用いた要素出現検出の最適化という記事に感激し、実際にIntersection Observerを使ってみたくなったので、題材としてスクロールスパイを選びました。

CSSのみによるスムーススクロール

CSSにはscroll-behaviorというプロパティがあり、

body {
  scroll-behavior: smooth;
}

と、smoothという値を指定することで、ブラウザーが自動的にスムーススクロールを実行してくれます。このページでもこの機能を使用しています。

現在、(iOS以外の)Firefoxではこのプロパティが実装されているので、このページもFirefoxで見てみてください。

参考:scroll-behavior: smooth; のデモ

CSSのみによる条件付き位置固定(position: sticky

スクロールスパイによるナビゲーションは、初めはページタイトルの下にあり、スクロールすると画面上部に固定されます。

通常、この機能はJavaScriptとCSSの組み合わせで実装されますが、このページではCSSのみで実現しています。

nav {
  position: sticky;
  /*
    :
    :
  */
}

と、positionプロパティにstickyを指定することで、こうした振る舞いになります。

現在、FirefoxとSafariで実装されています。

参考:素敵な position: sticky; | Unformed Building

CSSカスタムプロパティ(CSS変数)

目に見えないので実感はできませんが、スクロールスパイの高さは、CSSカスタムプロパティを使って設定しています。

スクロールスパイ部分の高さと同じだけ、各セクションの上部に余白を作っていますが、これらを同じ一つの変数で管理することで、設定漏れがないようになっています。

少し前まではFirefoxのみがCSSカスタムプロパティを実装していましたが、今では他にChrome、Safariでも使用することができます。

参考:CSS Variables(カスタムプロパティ): なぜ、関心を持つべきか? | プログラミング | POSTD

ソースコード

このページのソースコードはGitHubにホストしてもらっています。

ソースコード:KitaitiMakoto/scrollspy-example

©北市真