Frenar en un punto

En Overflow viste que overflow: auto crea un contenedor con scroll. Con scroll-snap-type en ese contenedor y scroll-snap-align en los hijos, el scroll termina siempre con un hijo alineado, como en un carrusel.

1. Tiposcroll-snap-typeVa en el contenedor: un eje (x, y, both, inline o block) y una intensidad. mandatory frena siempre en un punto; proximity, solo si el scroll terminó cerca de uno.
2. Alineaciónscroll-snap-alignVa en cada hijo y dice qué borde se alinea: start, center o end.
3. Margen de frenadoscroll-paddingAchica la zona de alineación, el snapport: con 24px cada paso frena a 24px del borde y se asoma el anterior. Sumale el mismo padding-inline, así el primero y el último también llegan a esa línea.
4. Sin saltosscroll-snap-stop: alwaysNo deja saltear hijos con un deslizamiento rápido: frena en el siguiente aunque el gesto diera para más.

Scrolleá la receta con el trackpad, el dedo o las flechas. La línea naranja es donde frena el borde alineado; la lectura de arriba dice qué paso quedó ahí y a cuántos píxeles.

.receta {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  padding-inline: 24px;
}

.paso {
  flex: none;
  scroll-snap-align: start;
}

<div class="flex overflow-x-auto snap-x snap-mandatory scroll-px-6 px-6" tabindex="0" role="region" aria-label="Pasos de la receta">
  <section class="w-[72%] flex-none snap-start">…</section>
  <section class="w-[72%] flex-none snap-start">…</section>
  …
</div>

Con proximity el scroll puede quedar entre dos pasos; con none no hay línea, y el desvío es el que dejaste. Los botones usan scrollBy(): el snap también ordena los scrolls de JavaScript.

Es Baseline desde hace años: scroll-snap-type anda completo desde Chrome 69, Firefox 99 y Safari 11, y scroll-snap-stop desde Chrome 75, Firefox 103 y Safari 15.

Anclas bajo un encabezado fijo

Cuando un enlace salta a #limpieza, el navegador pone el título arriba de todo. Si hay un encabezado sticky, el título queda tapado. Hay dos formas de dejarle lugar:

1. En el contenedorscroll-padding-topVa en el contenedor que scrollea y vale para todos los destinos de una vez. Es la que conviene para un encabezado fijo.
2. En el destinoscroll-margin-topUn margen que solo cuenta al llevar el elemento a la vista. Sirve cuando uno necesita más aire que los demás.

Las dos afectan a las anclas, a scrollIntoView(), al foco que lleva un elemento a la vista y al snap. El encabezado del manual de la cafetera mide 48px: con 56px el título queda abajo, con 8px de aire.

Probalo en el manual: tocá un enlace del índice y cambiá cómo se le deja lugar al encabezado.

.manual {
  overflow-y: auto;
  scroll-padding-top: 56px;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .manual {
    scroll-behavior: smooth;
  }
}

.indice {
  position: sticky;
  top: 0;
  height: 48px;
}

<div class="h-72 overflow-y-auto scroll-pt-14 overscroll-contain motion-safe:scroll-smooth" tabindex="0" role="region" aria-label="Manual de la cafetera">
  <nav class="sticky top-0 h-12">
    <a href="#molienda">Molienda</a>
    <a href="#carga">Carga</a>
    <a href="#fuego">Fuego</a>
    <a href="#limpieza">Limpieza</a>
  </nav>
  <h3 id="molienda">Molienda</h3>
  …
</div>

scroll-behavior: smooth anima esos saltos: las anclas, scrollTo() y scrollIntoView(). No toca el scroll de la rueda ni del dedo. Ponelo dentro de prefers-reduced-motion: no-preference, así quien pidió menos movimiento salta sin animación.

1html {
2  scroll-padding-top: 4rem; /* el alto del encabezado, más aire */
3}
4
5@media (prefers-reduced-motion: no-preference) {
6  html {
7    scroll-behavior: smooth;
8  }
9}

scroll-padding y scroll-margin son Baseline desde 2021 (Chrome 69, Firefox 68, Safari 14.1). scroll-behavior es Baseline desde 2022, con Safari 15.4.

Qué pasa al llegar al final

Si scrolleás un panel hasta el final y seguís, el scroll pasa a la página. Eso es el encadenamiento de scroll. En un menú lateral o en un chat molesta: llegás al final de la lista y se te mueve todo lo de atrás.

1. EncadenaautoEl comportamiento normal: pasa el scroll a la página y, en el celular, hace el rebote y el gesto de deslizar para recargar.
2. Corta la cadenacontainEl scroll se queda en el panel, pero el rebote sigue estando adentro.
3. Corta y no rebotanoneCorta la cadena y saca el rebote. En el html, overscroll-behavior-y: none desactiva el deslizar para recargar del navegador.

Probalo con el manual de la cafetera: con contain, la rueda se queda en el panel al llegar a la garantía; con auto, sigue con la página.

1.chat {
2  overflow-y: auto;
3  overscroll-behavior: contain;
4}
5
6/* una app con su propio gesto de recargar */
7html {
8  overscroll-behavior-y: none;
9}

contain y none andan en Chrome 63, Firefox 59 y Safari 16, pero solo en contenedores que de verdad tienen scroll. Chrome 144 y Firefox 150 lo extendieron a contenedores sin contenido de más y Safari todavía no, por eso web-features no lo cuenta como Baseline. Para el caso de siempre, un panel que scrollea, podés usarlo tranquilo.

La barra de scroll

En Windows, en Linux y en macOS con la barra siempre visible, la barra ocupa lugar: le saca ancho al contenido. Cuando una lista crece y aparece la barra, todo se corre unos 15px a la izquierda. Con barras superpuestas (macOS por defecto, los celulares) no pasa, porque la barra flota encima.

1. Reservar el lugarscrollbar-gutter: stableGuarda el lugar de la barra aunque no haga falta, así el contenido no salta cuando aparece. Con barras superpuestas no hace nada.
2. Anchoscrollbar-widthAcepta auto, thin o none. none la esconde pero sigue scrolleando: dejá otra pista de que hay más contenido.
3. Colorscrollbar-colorToma dos colores: el de la barra que se arrastra y el del riel.

Con auto, compará la columna del andén en los horarios de 4 y de 12 trenes. Después probá con stable. La franja naranja es el ancho que la barra le saca al contenido; con barras superpuestas mide 0.

.horarios {
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: auto;
}

<div class="h-49 overflow-y-auto" tabindex="0" role="region" aria-label="Horarios de los sábados">
  <table>…</table>
</div>

Son más nuevas: scrollbar-gutter y scrollbar-width son Baseline 2024 y scrollbar-color es Baseline 2025, con Safari 26.2. Si un navegador no las conoce, dibuja la barra de siempre: no se rompe nada.

En Tailwind

Tailwind tiene clases para el snap, el padding y el margin de scroll, el scroll suave y el overscroll. Para la barra no hay: van como propiedades arbitrarias entre corchetes.

1<html class="scroll-pt-16 motion-safe:scroll-smooth">
2  <header class="sticky top-0 h-14">…</header>
3
4  <!-- carrusel: frena en cada paso, a 24px del borde -->
5  <div class="flex overflow-x-auto snap-x snap-mandatory
6              scroll-px-6 overscroll-x-contain"
7       tabindex="0" role="region" aria-label="Pasos">
8    <section class="w-[72%] flex-none snap-start">…</section>
9  </div>
10
11  <!-- lista que crece sin correr el contenido -->
12  <div class="h-56 overflow-y-auto [scrollbar-gutter:stable]">…</div>
13</html>