Esempio di utilizzo di scroll-margin-block-end

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

Box 1
Box 2
Box 3
Box 4
Target
Box 6
Box 7

Bottone per scroll automatico

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


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

<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-bottom {
    scroll-margin-block-end: 60px;
    scroll-snap-align: end;
    background-color: #d19a66;
  }
</style>

<div class="scroll-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div id="bottomTarget" class="box target-bottom">Target</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
</div>