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 指定伪元素不能成为鼠标事件的目标，从而允许其后面的文本仍然是可选的/交互式的。
浏览器支持
✅没有警告。
热门推荐
10 小红书平安祝福语简短
11 生日祝福语大全女孩简短
12 收生日红包祝福语 简短
13 领证幽默祝福语简短
14 法考面试祝福语简短
15 老哥出门祝福语简短语
16 送灯祝福语简短独特
17 幼儿狗年祝福语大全简短
18 好听的元旦简短祝福语