用 CSS 掌握溢出滾動漸變-css教學-PHP中文網

用 CSS 掌握溢出滾動漸變

WBOY

發布： 2024-08-25 20:32:33

原創

695 人瀏覽過

介紹

本文涵蓋以下技術技能：

Mastering Overflow Scroll Gradient with CSS

在本實驗中，我們將學習如何使用 CSS 將淡入淡出漸層加入溢位元素。本實驗的目的是為使用者創建一個視覺提示，表明有更多內容需要滾動。透過使用 ::after 偽元素和 Linear-gradient() 函數，我們可以創建一個從透明漸變到白色的漸變，表示還有額外的內容可以查看。

溢出滾動漸變

VM中已經提供了index.html和style.css。

若要為溢位元素新增淡入淡出漸層並指示有更多內容要捲動，請依照下列步驟操作：

使用 ::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 標籤來預覽網頁。