如何将展示区中的图片滚动至水平居中？

为什么你的代码不生效？ #

1. scrollIntoView() 带动页面滚动的原因

scrollIntoView() 默认会把元素滚动到浏览器视口的可见区域，而非父容器（.showcase）的可视区域，因此会触发整个页面的滚动。

2. scrollTo() 计算不准的核心问题

你的代码存在两个关键错误：

• const img=showcase.querySelector("img") 始终取第一张图片的尺寸，而非当前点击的目标图片，导致所有计算都基于第一张图的大小，完全不符合实际需求
• 居中公式逻辑错误：没有考虑展示区宽度与图片宽度的差值，正确的居中应该让图片中心点和展示区中心点对齐

修复方案（两种可选） #

方案一：修复 scrollTo() 计算逻辑

直接修改你的函数，传入点击的目标图片，计算正确的滚动位置：

const showcase = document.querySelector(".showcase")
const move_img = (targetImg) => {
  // 获取展示区和当前图片的实际可视宽度
  const showcaseWidth = showcase.clientWidth;
  const imgWidth = targetImg.clientWidth;
  // 核心计算：图片左偏移量 - (展示区宽度 - 图片宽度)/2，确保中心点对齐
  const scrollLeft = targetImg.offsetLeft - (showcaseWidth - imgWidth) / 2;
  
  showcase.scrollTo({
    top: 0,
    left: scrollLeft,
    behavior: "smooth"
  });
}

// 绑定点击事件时直接传入当前图片元素
Array.from(showcase.children).forEach(child => {
  child.onclick = () => move_img(child);
});

方案二：用 scrollIntoView() 但限制仅父容器滚动

如果你更倾向于用 scrollIntoView()，给 .showcase 添加 position: relative 后，调用时指定正确选项即可避免页面滚动：

const showcase = document.querySelector(".showcase")
Array.from(showcase.children).forEach(child => {
  child.onclick = () => {
    child.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest', // 垂直方向不触发滚动
      inline: 'center'  // 水平方向居中对齐
    });
  }
});

配套CSS补充（不影响原有样式，仅提升滚动计算准确性）：

.showcase{
  /* 原有样式保留 */
  position: relative;
}

效果验证 #

两种方案都能实现：点击任意图片时，图片平滑滚动到 .showcase 的水平居中位置，且不会触发整个页面的滚动。

内容的提问来源于stack exchange，提问作者cak3_lover