Esempio di utilizzo di scroll-margin-block-start

Scrolla manualmente il contenitore fino al box Target (terzo elemento), oppure usa il bottone per scrollarlo in vista.
Noterai che non si appoggia al bordo superiore, ma lascia 60px di spazio sopra: è l'effetto di scroll-margin-block-start.

Box 1
Box 2
Target
Box 4
Box 5
Box 6
Box 7

Bottone per scroll automatico

⚠️ Usa JavaScript (scrollIntoView()) per portare in vista il box con margine superiore 60px.


CSS e HTML per scroll-margin-block-start:

<style>
  html {
    scroll-behavior: smooth;
  }

  .scroll-container {
    overflow-y: auto;
    height: 300px;
    border: 2px solid #666;
    padding: 10px;
    max-width: 300px;
    scroll-snap-type: y mandatory;
  }

  .box {
    height: 150px;
    margin-bottom: 20px;
    background-color: #98c379;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 150px;
    border-radius: 8px;
    scroll-snap-align: start;
  }

  .target-start {
    scroll-margin-block-start: 60px;
    scroll-snap-align: start;
    background-color: #61afef;
  }
</style>

<div class="scroll-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div id="startTarget" class="box target-start">Target</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
</div>