CSS ::溢出滚动渐变
向溢出元素添加渐变，以更好地指示还有更多内容要滚动。
的HTML
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?
的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;
}解释
position:relative 在父对象上建立一个用于伪元素的笛卡尔定位上下文。
::after 定义一个伪元素。
background-image:linear-gradient(...) 添加一个线性渐变，该渐变从透明变为白色（从上到下）。
position:absolute 从文档流中取出伪元素，并将其相对于父元素放置。
width:240px 匹配滚动元素的大小（滚动元素的大小是具有伪元素的父元素的子元素）。
height:25px 是衰落梯度伪元素的高度，应保持相对较小。
bottom:0 将伪元素放置在父元素的底部。
pointer-events:none 指定伪元素不能成为鼠标事件的目标，从而允许其后面的文本仍然是可选的/交互式的。
浏览器支持
✅没有警告。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短