The overflowing(will be renamed to scrollable) feature in the current specification is confusing, and @fantasai expressed similar concerns in #11182.

This proposal attempts to explore solutions to more common scenarios.

CSS authors often prefer to get a sense of where the container has scrolled to, and then adapt behavior and style.

Proposal

• Name: scroll-to
• For: @container
• Value: top | right | bottom | left | block-start | inline-start | block-end | inline-end

Common use cases

1. Display a back to top button after scrolling to the bottom of the page.
2. In a horizontally scrolling table or carousel, when scrolling to the left or right, play a “rubber band” animation to indicate that the user has scrolled to the last page. See the demo below.👇🏻

Details

The current overflowing feature performs this once every time the page is loaded, which is undesirable in the above use case.

Demo

This is the syntax used in the demo video:

.table-box {
  overscroll-behavior-x: contain;
  overflow: auto;
}
@container scroll-state(overflowing: left) { /* or scrollable: left */
  table {
    animation: slide-right .5s linear;
  }
}

@container scroll-state(overflowing: right) { /* or scrollable: right */
  table {
    animation: slide-left .5s linear;
  }
}

Compare this to the following syntax, which implements the same functionality, but with better readability.

@container scroll-state(scroll-to: right) {
  table {
    animation: slide-right .5s linear;
  }
}
@container scroll-state(scroll-to: left) {
  table {
    animation: slide-left .5s linear;
  }
}