Overflow scroll gradient
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
- Use the
::after
pseudo-element to create alinear-gradient()
that fades fromtransparent
towhite
(top to bottom). - Use
position: absolute
,width
andheight
to place and size the pseudo-element in its parent. - Use
pointer-events: none
to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
<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>
.overflow-scroll-gradient { position: relative; } .overflow-scroll-gradient::after { content: ''; position: absolute; bottom: 0; width: 250px; height: 25px; background: linear-gradient(transparent, white); pointer-events: none; } .overflow-scroll-gradient-scroller { overflow-y: scroll; background: white; width: 240px; height: 200px; padding: 15px; line-height: 1.2; }