<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1 (2)