CSS ::溢出滚动渐变

  • Z时代
  • 2024-01-10
  • 分类：综合

向溢出元素添加渐变，以更好地指示还有更多内容要滚动。

的HTML

<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>

的CSS

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.001),
    white
  ); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}

解释

  1. position: relative 在父对象上建立一个用于伪元素的笛卡尔定位上下文。

  2. ::after 定义一个伪元素。

  3. background-image: linear-gradient(...) 添加一个线性渐变，该渐变从透明变为白色（从上到下）。

  4. position: absolute 从文档流中取出伪元素，并将其相对于父元素放置。

  5. width: 240px 匹配滚动元素的大小（滚动元素的大小是具有伪元素的父元素的子元素）。

  6. height: 25px 是衰落梯度伪元素的高度，应保持相对较小。

  7. bottom: 0 将伪元素放置在父元素的底部。

  8. pointer-events: none 指定伪元素不能成为鼠标事件的目标，从而允许其后面的文本仍然是可选的/交互式的。

浏览器支持

✅没有警告。

以上是 CSS ::溢出滚动渐变 的全部内容， 来源链接： utcz.com/z/311505.html

回到顶部