如何使用JS将水平Div滚动至中心位置？

场景1：让所有方块组成的整体区域水平居中 #

假设你的HTML结构是滚动容器包裹着方块组，先通过CSS设置横向滚动布局，再用JS计算滚动距离实现居中：

HTML结构

<div class="scroll-container">
  <div class="blocks-wrapper">
    <!-- 动态生成的黑色方块 -->
  </div>
</div>

CSS样式

.scroll-container {
  width: 400px; /* 根据需求设置容器宽度 */
  overflow-x: auto;
  border: 1px solid #ddd;
}

.blocks-wrapper {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.block {
  width: 50px;
  height: 50px;
  background-color: #000;
  flex-shrink: 0; /* 防止方块被压缩 */
}

JS实现

// 核心函数：滚动容器到内容居中位置
function scrollToContentCenter() {
  const container = document.querySelector('.scroll-container');
  const contentWrapper = container.querySelector('.blocks-wrapper');
  
  // 计算需要滚动的距离：(内容总宽度 - 容器可视宽度) / 2
  const scrollOffset = (contentWrapper.offsetWidth - container.clientWidth) / 2;
  
  // 平滑滚动到目标位置，去掉behavior则为瞬间滚动
  container.scrollTo({
    left: scrollOffset,
    behavior: 'smooth'
  });
}

// 示例：根据用户输入生成方块后调用居中函数
function generateBlocksByCount(count) {
  const wrapper = document.querySelector('.blocks-wrapper');
  wrapper.innerHTML = '';
  
  for (let i = 0; i < count; i++) {
    const block = document.createElement('div');
    block.classList.add('block');
    wrapper.appendChild(block);
  }
  
  // 方块生成完成后执行居中滚动
  scrollToContentCenter();
}

// 调用示例：比如用户输入8个方块
generateBlocksByCount(8);

场景2：让单个指定方块水平居中 #

如果需要让某个特定方块（比如用户点击的）滚动到容器中心，可使用以下逻辑：

JS实现

// 让指定方块滚动到容器中心
function scrollBlockToCenter(targetBlock) {
  const container = document.querySelector('.scroll-container');
  const containerHalfWidth = container.clientWidth / 2;
  const blockHalfWidth = targetBlock.offsetWidth / 2;
  
  // 计算目标滚动位置：方块左侧偏移 + 方块半宽 - 容器半宽
  const targetScrollLeft = targetBlock.offsetLeft + blockHalfWidth - containerHalfWidth;
  
  container.scrollTo({
    left: targetScrollLeft,
    behavior: 'smooth'
  });
}

// 示例：给每个方块绑定点击居中事件
document.querySelectorAll('.block').forEach(block => {
  block.addEventListener('click', () => {
    scrollBlockToCenter(block);
  });
});

内容的提问来源于stack exchange，提问作者Ярослав Ясиницький