Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

CSS 视觉 - 对溢出的内容进行渐变

2019-07-30

描述

为溢出的元素添加一个渐变消失的效果,使用更友好的方式告知用户滚动后可以获取更多内容。

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: 150px;
  padding: 15px;
  line-height: 1.2;
}

Demo

说明

  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 使伪元素不能做为鼠标事件的对象,但允许其后的文本被选中或进行交互

浏览器支持

支持率:97.5%
支持情况:https://caniuse.com/#feat=css-gradients

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步