CSSだけで簡単なスクロールヒントを実装する

この記事の概要

こちらの記事を見ていて、簡易的なスクロールヒントならCSSだけでできるのでは？と思い立ち、記事にしてみました。

あまり実用的でもない気がしますが、スクロール可能なことを多少は示唆できると思います。

完成形

動作に関係のあるコードだけ抜き出すと次のようになります。

.section {
  animation: scrolling forwards;
  animation-timeline: scroll(self);
  background-color: #fff;
  max-height: 480px;
  overflow: auto;
}

@property --gradient-color {
  syntax: '<color>';
  inherits: false;
  initial-value: rgb(0 0 0 / 0.5);
}

@keyframes scrolling {
  from {
    --gradient-color: rgb(0 0 0 / 0.5);
    background-image: linear-gradient(transparent 80%, var(--gradient-color));
  }
  20%, to {
    --gradient-color: rgb(255 255 255 / 1);
  }
}

解説

animation-timeline: scroll(self);の使用

元記事にもあるようにanimation-timeline: scroll(self);を使用すると、その要素自体がスクロール可能かどうかでスタイルを切り替えることができます。

これによって、スタイルを次のように分岐させています。

1. デフォルト状態
   1. スクロールがなければただの白い背景
2. from
   1. スクロールがある場合、スクロールが始まる前はグラデーションをかけて「この先もコンテンツがありますよ」と示唆する
3. 20%, to
   1. 20%は任意の値
   2. 少しスクロールするとグラデーションが消える

@propertyの使用

本筋ではありませんが、@propertyの使用も必要です。

通常のカスタムプロパティは補完方法が定められていないので、例えば次のコードはうまく動きません。

@keyframes scrolling {
  from {
    background-image: linear-gradient(transparent 80%, rgb(0 0 0 / 0.5));
  }
  20%, to {
    background-image: linear-gradient(transparent 80%, rgb(255 255 255 / 1));
  }
}

しかし、はじめに@propertyで指定することで、RGBやアルファ値の各成分を個別に補間できるようになっています。