用 CSS 掌握溢出滚动渐变

简介

在本实验中，我们将学习如何使用 CSS 为溢出元素添加渐变效果。本实验的目的是为用户创建一个视觉提示，表明还有更多内容需要滚动查看。通过使用 ::after 伪元素和 linear-gradient() 函数，我们可以创建一个从透明渐变到白色的渐变效果，表明还有更多内容可供查看。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个中级级别的实验，完成率为 64%。获得了学习者 100% 的好评率。

溢出滚动渐变

虚拟机中已经提供了 index.html 和 style.css。

要为溢出元素添加渐变效果，并表明还有更多内容需要滚动，请按照以下步骤操作：

使用 ::after 伪元素创建一个从 透明 渐变到 白色（从上到下）的 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 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了溢出滚动渐变实验。你可以在 LabEx 中练习更多实验来提升你的技能。