javascript – CSS Scroll Snap: Dynamic content material insertion triggers scroll

const startingIdx = 3;
  const batchSize = 10;
  const delay = 500;
  const root = doc.querySelector('.drugs');

  const appendBatch = (from) => {
    for(let i = 0; i < batchSize; i++){
      const factor = doc.createElement('div');
      factor.classList.add('tablet');
      factor.innerText = String(from + i);

      root.appendChild(factor);
    }
  } 

  for(let i = 0; i < 3; i++){
    setTimeout(() => appendBatch(startingIdx + i*batchSize), i*delay);
  }

.drugs {
      show: flex;
      hole: 20px;

      width: 100%;
      overflow: auto;

      scroll-snap-type: x obligatory;
    }

    .tablet {
      width: 120px;
      peak: 40px;
      background: rgba(92, 138, 255, 0.15);
      show: flex;
      align-items: middle;
      justify-content: middle;
      border-radius: 20px;
      flex-shrink: 0;

      scroll-snap-align: begin;
    }

<fundamental>
    <div class="drugs">
      <div class="tablet">1</div>
      <div class="tablet">2</div>
    </div>
  </fundamental>