Esempio di utilizzo di scroll-margin-left

Scorri a scatti orizzontalmente: il box rosso ha 40px di margine sinistro extra grazie a scroll-margin-left.

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 sinistro extra.


CSS e HTML per scroll-margin-left:

  <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: start;
      border: 1px solid #fff;
      border-radius: 10px;
    }

    .target-left {
      scroll-margin-left: 40px;
      background-color: #e06c75;
    }
  </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 target-left">Target</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>