Esempio di utilizzo di scroll-margin-inline-end

Scorri a scatti orizzontalmente: il box rosso ha 50px di margine orizzontale destro grazie a scroll-margin-inline-end, oppure clicca il bottone per scrollare automaticamente fino al box target.

Box 1
Box 2
Box 3
Target
Box 5
Box 6

Bottone per scroll automatico

⚠️ Usa JavaScript (scrollIntoView()) per portare in vista il box con margine orizzontale destro di 50px


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

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

    .scroll-container {
      text-align: left;
      width: 262px;
      height: 250px;
      overflow-x: scroll;
      display: flex;
      box-sizing: border-box;
      border: 5px solid #222;
      scroll-snap-type: x mandatory;
    }

    .box {
      flex: 0 0 250px;
      width: 250px;
      background-color: #56b6c2;
      color: #fff;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: end;
      border: 1px solid #fff;
      border-radius: 10px;
    }

    .target-right {
      scroll-margin-inline-end: 50px;
      background-color: #e06c75;
    }
  </style>

  <div class="scroll-container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box target-right">Target</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>