はじめに
この実験では、CSS を使って、はみ出た要素にフェードインググラデーションを追加する方法を学びます。この実験の目的は、スクロールする追加のコンテンツがあることをユーザーに視覚的なキューとして伝えることです。::after疑似要素とlinear-gradient()関数を使うことで、透明から白にフェードするグラデーションを作成し、追加のコンテンツが表示されることを示すことができます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 中級 レベルの実験の完了率は 64%です。学習者から 100% の好評価を得ています。
はみ出しスクロールグラデーション
VM 内には既にindex.htmlとstyle.cssが用意されています。
はみ出た要素にフェードインググラデーションを追加し、スクロールする追加のコンテンツがあることを示すには、次の手順に従います。
::after疑似要素を使って、transparentからwhiteに（上から下に）フェードするlinear-gradient()を作成します。- 疑似要素を親要素内で
position: absolute、width、およびheightを使って配置とサイズを設定します。 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 でさらに多くの実験を練習できます。