CSS でオーバーフロースクロールグラデーションをマスターする-CSSチュートリアル-php.cn

CSS でオーバーフロースクロールグラデーションをマスターする

WBOY

リリース： 2024-08-25 20:32:33

オリジナル

980 人が閲覧しました

導入

この記事では、次の技術スキルについて説明します:

Mastering Overflow Scroll Gradient with CSS

このラボでは、CSS を使用してオーバーフロー要素にフェージンググラデーションを追加する方法を学びます。このラボの目的は、スクロールすべきコンテンツがまだあるという視覚的な合図をユーザーに作成することです。 ::after 疑似要素と Linear-gradient() 関数を使用すると、透明から白にフェードするグラデーションを作成でき、表示する追加のコンテンツがあることを示します。

オーバーフロースクロールグラデーション

index.html と style.css はすでに VM に提供されています。

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

::after 疑似要素を使用して、透明から白 (上から下) にフェードする Linear-gradient() を作成します。
絶対位置、幅、高さの位置を使用して、親内の擬似要素の位置とサイズを設定します。
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;
}

ログイン後にコピー

右下隅にある [ライブ配信] をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。