11 · Scroll state

Scroll state

CSS reacciona al estado de snap/stuck del scroll

Chrome 135+ · experimental

← Índice

container-type: scroll-state

Habilita queries sobre el estado de scroll del contenedor: snapped, stuck, etc.

container-type: scroll-state

@container scroll-state(snapped: x)

Cada card es su propio contenedor. Al hacer snap, su opacidad sube a 1. Scrolleá abajo.

@container not scroll-state(snapped: x)

Sin JS

Antes necesitabas IntersectionObserver para saber qué card estaba activa. Ahora CSS lo sabe solo.

Carrusel scroll-snap — scrolleá horizontalmente

Cada card se atenúa cuando no está snapped. Scrolleá con drag, flechas o swipe.

01Intro

02container-type

03snapped: x

04opacity 1

05state query

06sin JS

css

/* cada item es su propio contenedor scroll-state */
.ss-item {
  container-type: scroll-state;
  scroll-snap-align: center;
}

/* cuando NO está snapped, se atenúa */
@container not scroll-state(snapped: x) {
  .ss-item-inner {
    opacity: .25;
  }
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.