BaselineLab

scroll-padding en CSS

Explora cómo scroll-padding desplaza hacia dentro la región óptima de un contenedor de scroll sin alterar su layout. Aplica un valor común o ajusta cada lado por separado.

Preguntar a la IA

scroll-padding en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Qué debes observar

Alinea la tarjeta 05 y cambia el valor. En inicio se separará de arriba e izquierda; en final, de abajo y derecha.

Zona naranja: región interior donde se alinea la tarjeta

Destino 1

Desplázate para situar esta tarjeta en la región óptima.

Destino 2

Desplázate para situar esta tarjeta en la región óptima.

Destino 3

Desplázate para situar esta tarjeta en la región óptima.

Destino 4

Desplázate para situar esta tarjeta en la región óptima.

Destino de prueba

Destino 5

Desplázate para situar esta tarjeta en la región óptima.

Destino 6

Desplázate para situar esta tarjeta en la región óptima.

Destino 7

Desplázate para situar esta tarjeta en la región óptima.

Destino 8

Desplázate para situar esta tarjeta en la región óptima.

Destino 9

Desplázate para situar esta tarjeta en la región óptima.

HTML
<div class="scrollport" aria-label="Área interactiva de scroll-padding" tabindex="0">
  <article
    class="snap-target"
    style="--target-color: #ffb38a"
    tabindex="0"
  >
    <h2>Destino 1</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #72d6c9"
    tabindex="0"
  >
    <h2>Destino 2</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #b6a8ff"
    tabindex="0"
  >
    <h2>Destino 3</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #ffd166"
    tabindex="0"
  >
    <h2>Destino 4</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #f7a6c4"
    tabindex="0"
  >
    <h2>Destino 5</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #8ecae6"
    tabindex="0"
  >
    <h2>Destino 6</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #a7df9b"
    tabindex="0"
  >
    <h2>Destino 7</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #f4a261"
    tabindex="0"
  >
    <h2>Destino 8</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #90caf9"
    tabindex="0"
  >
    <h2>Destino 9</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
</div>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<div class="grid grid-cols-[repeat(3,minmax(16rem,72%))] auto-rows-[72%] gap-6 inline-[min(100%,36rem)] block-96 m-0 p-6 overflow-auto overscroll-contain snap-both snap-mandatory scroll-p-[24px]" aria-label="Área interactiva de scroll-padding" tabindex="0">
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#ffb38a_72%,#172033)] bg-[#ffb38a]"
    tabindex="0"
  >
    <h2>Destino 1</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#72d6c9_72%,#172033)] bg-[#72d6c9]"
    tabindex="0"
  >
    <h2>Destino 2</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#b6a8ff_72%,#172033)] bg-[#b6a8ff]"
    tabindex="0"
  >
    <h2>Destino 3</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#ffd166_72%,#172033)] bg-[#ffd166]"
    tabindex="0"
  >
    <h2>Destino 4</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#f7a6c4_72%,#172033)] bg-[#f7a6c4]"
    tabindex="0"
  >
    <h2>Destino 5</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#8ecae6_72%,#172033)] bg-[#8ecae6]"
    tabindex="0"
  >
    <h2>Destino 6</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#a7df9b_72%,#172033)] bg-[#a7df9b]"
    tabindex="0"
  >
    <h2>Destino 7</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#f4a261_72%,#172033)] bg-[#f4a261]"
    tabindex="0"
  >
    <h2>Destino 8</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-6 border rounded-2xl text-[#172033] snap-start *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#90caf9_72%,#172033)] bg-[#90caf9]"
    tabindex="0"
  >
    <h2>Destino 9</h2>
    <p>Desplázate para situar esta tarjeta en la región óptima.</p>
  </article>
</div>
CSS
.scrollport {
  display: grid;
  grid-template-columns: repeat(3, minmax(16rem, 72%));
  grid-auto-rows: 72%;
  gap: 1.5rem;
  inline-size: min(100%, 36rem);
  block-size: 24rem;
  margin: 0;
  padding: 1.5rem;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: both mandatory;
  scroll-padding: 24px;
}

.snap-target {
  box-sizing: border-box;
  display: grid;
  align-content: end;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--target-color) 72%, #172033);
  border-radius: 1rem;
  background: var(--target-color);
  color: #172033;
  scroll-snap-align: start;
}

.snap-target > * {
  margin: 0;
}

.snap-target h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.snap-target:focus-visible {
  outline: 4px solid #172033;
  outline-offset: -8px;
}