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 指定伪元素不能成为鼠标事件的目标，从而允许其后面的文本仍然是可选的/交互式的。
浏览器支持
✅没有警告。