如何让带有.active类的中间元素固定，实现横向滚动切换

需求说明 #

当前滑块点击图片后会为目标元素添加.active类并显示对应文本，但.active元素无法自动居中，部分元素（如第5个）需要手动滚动才能查看。需要实现点击后滑块自动滚动，让.active元素始终固定在容器中间位置。

修改方案 #

1. 调整滑块容器CSS

为容器添加横向滚动支持，并开启平滑滚动效果：

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth; /* 实现平滑滚动过渡 */
  gap: 12px; /* 图片间的间距，可按需调整 */
  padding: 10px 0;
}

.RSL {
  flex: 0 0 auto; /* 固定宽度，防止被压缩 */
  width: 200px; /* 单张图片的宽度，可自定义 */
  display: none; /* 初始状态隐藏所有图片 */
}

.RSL.active {
  display: block;
  border: 2px solid #2c3e50; /* 为active元素添加边框，突出显示 */
}

2. 更新JavaScript逻辑

修正索引类型错误，并添加滚动居中的计算逻辑：

let slideIndex = 5;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function RSC(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  const slides = document.getElementsByClassName("RSL");
  const dots = document.getElementsByClassName("dots");
  const sliderContainer = document.querySelector(".slider-container");

  // 处理滑块循环逻辑
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  // 重置所有slide和dots的状态
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].classList.remove("active");
    dots[i].classList.remove("active");
  }

  // 设置当前active的slide和dot
  const activeSlide = slides[slideIndex - 1];
  activeSlide.style.display = "block";
  activeSlide.classList.add("active");
  dots[slideIndex - 1].classList.add("active");

  // 计算并滚动到居中位置
  if (sliderContainer && activeSlide) {
    const containerMidPoint = sliderContainer.offsetWidth / 2;
    const slideMidPoint = activeSlide.offsetLeft + (activeSlide.offsetWidth / 2);
    const scrollTarget = slideMidPoint - containerMidPoint;
    
    sliderContainer.scrollTo({
      left: scrollTarget,
      behavior: 'smooth'
    });
  }
}

关键修改点说明 #

• 将slideIndex从字符串类型改为数字类型，避免运算错误
• 为滑块容器添加flex布局和横向滚动属性，支持横向滑动
• 通过计算容器和active元素的中点位置，调用scrollTo实现精准居中
• 使用classList操作类名，比字符串拼接更安全可靠
• 开启scroll-behavior: smooth，让滚动过程更流畅自然

效果验证 #

现在点击任意图片或底部的dots按钮，.active元素会自动平滑滚动到容器的中间位置，无需手动拖动滚动条，第5个元素也能直接居中显示。

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