Scrollspy example

これは何？

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

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

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

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

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

body {
  scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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