Center content horizontally within scrollable container

by Irakli Bardavelidze

HTML

<div class="scroll-container" id="scroll-container">
  <div class="content" id="content">
  </div>
</div>

CSS

#scroll-container {
  width: 300px;
  overflow-x: auto;
}

#content {
  white-space: nowrap;
  display: inline-block;
  width: 9100px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const scrollContainer = document.getElementById('scroll-container');
  const content = document.getElementById('content');
  
  const middlePosition = (content.offsetWidth - scrollContainer.clientWidth) / 2;
 
  scrollContainer.scrollLeft = middlePosition;
});