はみ出しスクロールグラデーション

はじめに

この実験では、CSSを使って、はみ出た要素にフェードインググラデーションを追加する方法を学びます。この実験の目的は、スクロールする追加のコンテンツがあることをユーザーに視覚的なキューとして伝えることです。::after疑似要素とlinear-gradient()関数を使うことで、透明から白にフェードするグラデーションを作成し、追加のコンテンツが表示されることを示すことができます。

Skills Graph

はみ出しスクロールグラデーション

VM内には既にindex.htmlとstyle.cssが用意されています。

はみ出た要素にフェードインググラデーションを追加し、スクロールする追加のコンテンツがあることを示すには、次の手順に従います。

1. ::after疑似要素を使って、transparentからwhiteに（上から下に）フェードするlinear-gradient()を作成します。
2. 疑似要素を親要素内でposition: absolute、width、およびheightを使って配置とサイズを設定します。
3. pointer-events: noneを使って疑似要素をマウスイベントから除外し、その後ろのテキストを選択可能/インタラクティブに保ちます。

以下は、HTMLとCSSのコードスニペットの例です。

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient-scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>

.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 250px;
  height: 25px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.overflow-scroll-gradient-scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたははみ出しスクロールグラデーションの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習できます。