CSS Scroll Markers e Buttons: Carrosséis Nativos Sem JavaScript

Os novos pseudo-elementos ::scroll-button() e ::scroll-marker() eliminam a necessidade de JavaScript para construir navegação de conteúdo com scroll, oferecendo acessibilidade integrada e controle total via CSS. O navegador automaticamente gerencia os papéis ARIA corretos, a ordem de tabulação e até desabilita os botões quando você alcança o início ou fim do conteúdo.

O ::scroll-marker representa um marcador de scroll que se comporta como uma âncora cujo alvo é o elemento de origem, rolando o container até esse elemento quando ativado. Para criar os marcadores, você precisa definir a propriedade scroll-marker-group no container e adicionar conteúdo ao pseudo-elemento. Os marcadores são agrupados automaticamente em um ::scroll-marker-group que pode ser posicionado antes ou depois do conteúdo:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel > li::scroll-marker {
  content: '';
  width: 1em;
  height: 1em;
  border: 1px solid black;
  border-radius: 50%;
}

.carousel > li::scroll-marker:target-current {
  background: black;
}

::scroll-marker-group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

O ::scroll-button() gera botões interativos dentro de um container de scroll quando suas propriedades de conteúdo são definidas como um valor diferente de none. Você pode criar até quatro botões por container, controlando scroll nos eixos block e inline. Os botões aceitam direções como left, right, up, down, ou lógicas como inline-start e block-end:

.carousel::scroll-button(left) {
  content: "⬅" / "Scroll Previous";
}

.carousel::scroll-button(right) {
  content: "⮕" / "Scroll Next";
}

/* Estilizar todos os botões de uma vez */
.carousel::scroll-button(*) {
  position: absolute;
  background: white;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 1rem;
}

Recursos complementares incluem scroll-target-group que transforma uma lista manual de links âncora em marcadores de scroll, e a pseudo-classe :target-current para estilizar o elemento ativo. Isso permite criar navegações tipo "scroll-spy" declarativamente. Combinando com scroll-snap-align, anchor positioning e scroll-driven animations, você consegue criar experiências visuais ricas que eram impossíveis sem JavaScript, tudo rodando off the main thread para performance impecável.

Suporte nos Navegadores

Esses recursos estão disponíveis a partir do Chrome 135 e são parte do CSS Overflow Module Level 5, atualmente em Working Draft, logo logo chega no safari e firedox. Para detectar suporte, use CSS.supports("selector(::scroll-marker)").