用 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 选项卡来预览网页。