Esempio di utilizzo di scroll-padding (shorthand)

Scrolla manualmente il contenitore: noterai che ogni elemento si centra nella finestra di scroll lasciando padding visivo di 40px sopra e sotto e 60px a destra e sinistra ( quando lo spazio รจ disponibile ). Clicca il bottone per navigare automaticamente.

1
2
3
4
5
6
7
8
9


Codice HTML e CSS per scroll-padding:


<style>
.scroll-container {
  width: 320px;
  height: 320px;
  overflow: auto;
  border: 2px solid #666;
  padding: 10px;
  scroll-snap-type: both mandatory;
  scroll-padding: 40px 60px 40px 60px; /* top right bottom left */
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
}

.box {
  background-color: #c678dd;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  border-radius: 8px;
  scroll-snap-align: center;
}
</style>

<div class="scroll-container" id="scrollContainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>