Scroll edge fade

A clipped edge is ambiguous. A row cut cleanly in half by the bottom of a panel could be the last row rendered awkwardly, or it could be the eleventh of ninety. The edge fade resolves that ambiguity by softening the cut: content dissolves into the panel colour over twenty or thirty pixels, which reads as material passing under an edge rather than as material ending at one. The affordance is entirely passive. There is nothing to click, no space taken from the content, and no state to keep beyond which edges currently have something behind them.

That last part is the whole craft. A fade painted unconditionally is a lie half the time: at the top of a list it claims content above that does not exist, and once the reader reaches the bottom it keeps hinting at a row that is not there. So both edges answer to the scroller’s own position. The top fade appears the moment scrollTop leaves zero and the bottom one leaves when the scroller reaches its end, which means the fades together also report where in the list the reader is standing. Two implementations are common. A gradient overlay in the container’s background colour, absolutely positioned over the scroller, is the compatible one and the reason the pattern is also called a scroll shadow: paint the same strip as a soft inner shadow instead of a fade and it says the same thing in a different dialect. A mask-image on the scroller itself is the honest one, since it fades whatever is behind it rather than assuming a flat colour, and it survives a photograph or a gradient under the list.

The fade and the scrollbar make the same claim by opposite means. A scrollbar is a drawn control that states the proportion and the position explicitly and offers to change them; a fade only whispers that the scroll container continues, and cannot be grabbed. Overlay scrollbars are what made the fade necessary, since a bar that appears only while the reader is already scrolling cannot tell them that scrolling is possible. On a horizontal rail the fade is doing an extra job: it is the standing cue that a carousel has more items sideways, where nothing about a row of cards ending flush at the panel edge suggests any such thing. The same strip appears as pure scenery elsewhere, on a marquee, where the content is moving rather than clipped and the fade hides the seam at each end.

Two failure modes are worth naming. A fade over a list of interactive rows must set pointer-events: none, or the strip swallows clicks on the row it is dimming. And a fade deep enough to be pretty is deep enough to hide a line of text: the gradient should erase the top of a row and never a whole one, because a reader who cannot make out the partial row loses the very cue the fade exists to give. Ambient fades that soften content in place, rather than at an edge, belong to progressive blur instead.