Experimental Feature

⚠️ Unsupported ⚠️

This gallery requires a few CSS features that aren't present in your current browser.

To try this out, download Canary and visit chrome://flags/#enable-experimental-web-platform-features in a tab, enable it, and reload this page.

Horizontal List

Scroll Buttons Scroll Markers Scroll State Queries Scroll Driven Animation interactivity: inert Anchor

This is a regular list of items, but they've been given tabindex=0 so they can be focused. In addition, interactivity: inert is used with scroll driven animation view(x) to make offscreen items non-focusable. Items in this state also have reduced opacity.

Scroll buttons also responsively adapt to inner or outer positioning based on availability!