Cocoon目次追従／サイドバー固定の目次に垂直スクロールバーを設置する（CSS）

今回は目次部分の操作性を改善するカスタマイズ。

具体的にはサイドバー目次に垂直スクロールバーをつけていきます。

実装したきっかけは当ブログを見てくださった方からお問い合わせがあったこと。

どんな状態なのかをパソコンで確認してみると…

ということで改善していきます。

Cocoon目次追従とは

まず目次追従について。

サイドバーに目次を表示したときに、記事を下にスクロールしても目次だけが固定されて表示される仕組みのことを言います。

Cocoonで目次追従を設定する方法（簡単）

追従という言葉を聞くと難しそうな感じがするけど、実はこの目次追従を設定するのはCocoonだととても簡単です。

管理画面の外観→ウィジェット→サイドバースロール追従に目次を追加するだけ！（ドラッグ＆ドロップ）

この操作だけで追従するようになります。

追加した目次をクリックすると簡単な設定ができるようになっています。

1. 表示するタイトル
2. 表示する目次の階層
3. 表示設定

Cocoon目次追従が途中で見切れる原因

ここで冒頭の問題に戻るのですが…

記事が短く目次数が少ないときは問題ありませんが、表示する目次が多いと途中で見切れてしまうんですよね。

Cocoon目次追従にはプロパティposition:stickyが使われている

この現象が起こる原因として、

サイドバーの目次追従にposition:stickyが使われていること。

CSSのプロパティのひとつです。

このため、最後までスクロールされればきちんと目次の最後までは動いて全部が見えるのですが、はじめに目次の位置で留まった段階では途中で見切れているように見えてしまいます。

この動き方の特性上、見切れていると感じる人は多いはず…

対策／縦方法にスクロールバーを設置する

ここでの対策として、

①は現実的ではなく、②階層を制限しても長くなる場合を想定して、今回は③の目次の縦方向にスクロールバーを設置してみることに。

目次に表示領域（高さ）を設定し、長い場合は目次内でスクロールができるようにします。

Cocoon目次追従にスクロールバーを設置するCSS

こちらのCSSを追加しました。

.widget_toc{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}

.widget_toc（サイドバーの見出し）に、

• overflow-y:scroll;→縦方向にはみ出た分、スクロールバーを設置する。
• max-height:calc(100vh – 150px);→100vh(画面いっぱいの高さ)からヘッダーの高さをマイナスし調整した高さを指定。ここはサイトに合わせてお好みの高さで構いません。

Cocoon目次追従にスクロールバーが設置されました

このコードを追加したところ、サイドバー目次の右側に垂直スクロールバーが設置され動作確認もできました。

設定した高さを超える場合にのみ、垂直スクロールバーを表示する／方法１

ここまでで完成なのですが少し調整を追加します。

スクロールバーが常時見えてしまう

目次数が少なくスクロールする必要がないときも、設置した垂直スクロールバーの背景色が見えてしまうんですよね…

デザイン的にはスクロールしないときには必要ないので、この薄いグレーの背景色は消して、スクロールするときに動かすつまみの部分だけ残してみることに。

対策／スクロールが必要なときの動かす部分のみに背景色をつける

そうすることで目次項目が少ない記事からスクロールバーは消えて、スクロールが必要な記事だけに表示される状態となりました。

スクロールバーを調整するCSS

今回使用するコードはこちらです。
参考サイト　CSSでスクロールバーのデザインを変更する方法

Google ChromeやSafariなど「webkit」を採用しているブラウザ

/*スクロールバー調整（webkitを採用しているブラウザ）*/
.widget_toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}

Firefoxの場合はこちらが有効

Firefoxは、次のように記述するとスクロールバーのデザインが変更できます。

/* スクロールバー調整（Firefox）*/
.widget_toc{
	scrollbar-width: thin;/* スクロールバーの太さ（細く）、autoでも可*/
	scrollbar-color:  #ccc transparent ; /* ツマミの色と背景 */
}

• スクロールバーの幅を変えたり細かい調整はできません
• 目次部分限定ではなくサイト全体のスクロールバーに適用させる場合はセレクタ部分（.widget_toc）をhtmlに変更します。

html{
	scrollbar-width: thin;/* スクロールバーの太さ */
	scrollbar-color:  #ccc transparent ; /* ツマミの色と背景 */
}

【これで解決！】設定した高さを超える場合にのみ、垂直スクロールバーを表示／方法２

ここまで長々と書きましたが…

overflow-y: auto; にすることで、max-height プロパティで設定した高さを超える場合にだけ垂直スクロールバーを表示するように指定できるんです。

/*max-heightを超える目次にのみスクロールバーを表示する*/
.widget_toc{
	overflow-y:auto;
	max-height: calc(100vh - 150px); /* 目次の高さ上限（お好みで設定）*/
}

スクロールバーの細かい設定をしなくても、これだけでmax-heightまで高さの満たない目次に垂直スクロールバーは表示されません。

後からoverflow-y:auto;の便利さに気付いたので、記事最後の追記という形になりました。

さいごに

読者の方へご連絡したところ、問題なく動作していることを確認していただきました。

ユーザビリティを上げ、見やすいブログ作りにご活用ください。