Scroll fades
Edges fade only on the side that has more to scroll, driven by the scroll position itself.
Examples
Horizontal scroll
AuroraBorealisCirrusCumulusHaloNimbusParhelionStratusTwilightZodiacalCoronaGlory
Vertical scroll
- Aurora
- Borealis
- Cirrus
- Cumulus
- Halo
- Nimbus
- Parhelion
- Stratus
- Twilight
- Zodiacal
Anatomy
.scroll-x | Scrolls sideways with a hidden scrollbar; the start and end edges fade while there is more to scroll that way. |
.scroll-y | The same, vertically. Give it a max-block-size. |
Accessibility
- The fade is a mask and the scrollbar is hidden, so nothing tells a screen reader the area scrolls. Keep the content reachable in reading order.
- Where scroll containers are not focusable by default, add
tabindex="0"so the area can be scrolled from the keyboard. - Without scroll-driven animation support the edges do not fade at all; the area still scrolls.