如何在不切断第一个元素的情况下居中水平滚动的div？

.parent-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.child-container {
  display: inline-block;
}

<div class="parent-container">
  <div class="child-container">
    <!-- 滚动元素1 -->
    <!-- 滚动元素2 -->
    <!-- 滚动元素3 -->
    <!-- ... -->
  </div>
</div>

const parentContainer = document.querySelector('.parent-container');
const childContainer = document.querySelector('.child-container');

parentContainer.addEventListener('scroll', function() {
  if (parentContainer.scrollLeft >= childContainer.offsetWidth) {
    parentContainer.scrollLeft = 0;
  }
});