【Cocoon】スクロール可能なことに気づきやすいようにPC表示サイドバーの目次下端にグラデーションでフェードをかける【WordPress】

OS側の設定でスクロールバーが非表示の場合、Windows版FirefoxだとPC表示時のサイドバーに設置している目次がスクロール可能か視認しにくかったので、CSSで目次下端にフェードをかけて気づきやすいようにした。

基本情報

Windows11には「スクロールバーを常に表示する（オン/オフ）」という設定がある。

この設定がオフの場合、Firefoxだとスクロールバーが常時表示されない（＝マウスポインターが離れると段階的にスクロールバーが消える）。

ChromeやEdgeだとブラウザ側（CSS）で常時表示も可能。

「スクロールバーを常に表示する」がオフだと、目次がスクロール可能な場合でもマウスポインターが目次エリアにない場合はスクロールバーが表示されないため、スクロールの可否を認識しづらい。

目次エリアにマウスオーバーしているとスクロールバーが隠れているあたりに細い縦線が表示される。スクロールバーの位置にマウスオーバーするとスクロールバーが表示される。

マウスポインターが目次エリアから離れると、数秒の間を置いて、細い縦線もスクロールバーも非表示になる。

ということで、目次エリアにマウスオーバーしなくても、サイドバーに設置した目次がスクロール可能なことをさりげなく伝えられるように、目次の下端にCSSで不透明度を設定してフェードアウトした。

CSS

.toc-widget-box,
#pc_text-2 .text-pc {
    max-height: 36vh;
    overflow-y: auto;
    margin-bottom: 24px;
    position: relative;
}

.toc-widget-box::after,
#pc_text-2 .text-pc::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 45px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
  pointer-events: none;
}

備考

ダークモードのスキンには非対応（目次下端の背景が白くなる）。

ブラウザ拡張機能『Dark Reader』を使った場合、「その他→テーマ生成法の切替」で「動的、背フィルタ、フィルタ+」だと違和感なし。「静的」だと目次下端の背景が白くなり視認し辛くなる。

「スクロールバーを常に表示する」がオンだと、あまり意味がない。