CSS SNIPPET

  返回

滚动框溢出内容的渐变效果  视觉效果

为溢出元素添加淡出渐变,可以更好地提醒用户还有更多内容需要滚动查看。

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: 250px;
  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;
}
效果演示
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
代码说明
  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 表示伪元素不接收鼠标事件,从而使它下面的文本依然能够被鼠标选中。
浏览器支持

100.0%