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

要在不切断第一个元素的情况下居中水平滚动的div，可以使用CSS和JavaScript来实现。以下是一种可能的解决方案：

首先，创建一个包含所有要滚动的元素的父容器div，并设置其样式为具有固定宽度和隐藏溢出的属性。

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

在父容器内部创建一个子容器div，并设置其样式为inline-block以容纳所有要滚动的元素。

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

将所有要滚动的元素放置在子容器内。

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

使用JavaScript来实现滚动效果。可以通过监听父容器的滚动事件，并将第一个元素复制一份放在最后，然后在滚动到最后一个元素时，将滚动位置重置为0，以实现循环滚动的效果。

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

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

这样，就可以实现在不切断第一个元素的情况下居中水平滚动的div。请注意，这只是一种解决方案，具体实现方式可能因项目需求和代码结构而有所不同。

参考链接：