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 婆婆66岁祝福语简短
13 今天孩子高考祝福语简短
14 送彩票生日祝福语简短
15 分别祝福语简短情话英文
16 画室揭牌仪式祝福语简短
17 女友妈妈生日祝福语简短
18 离别赠言离职祝福语简短