v149 · CSS

Scrollable Fade Indicators

A real vertical scroller and horizontal chip rail expose fade hints only when the scroll container can still move in that direction. The indicators are descendants of the scroll container, so @container scroll-state(scrollable: ...) can style them directly.

Checking scroll-state container query support...

Vertical scroller scrollable: top / bottom / y / none

Horizontal rail scrollable: left / right / x / none

CSS under test

.scroll-box {
  container: scrollbox / scroll-state;
  overflow-y: auto;
}

.fade-top,
.fade-bottom {
  opacity: 0;
}

@container scrollbox scroll-state(scrollable: top) {
  .fade-top { opacity: 1; }
}

@container scrollbox scroll-state(scrollable: bottom) {
  .fade-bottom { opacity: 1; }
}

see also

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗