点击轮播slide项移动到最左侧首次生效后续点击失效如何解决

问题原因 #

• 你用的getBoundingClientRect().left获取的是元素相对于浏览器视口的实时坐标，首次平移轮播轨道后，所有轮播项的视口坐标已经发生变化，且你没有累计轨道已经产生的偏移量，导致后续计算的平移值错误。
• 你没有考虑外层.slider容器本身在页面中就有距离视口左侧的间距（body设置了flex居中，容器默认不会贴视口左侧），你的需求是轮播项对齐.slider的左边缘，而非浏览器视口左边缘。

修复方案 #

新增变量累计轨道的总偏移量，每次点击以.slider容器的左边缘为基准计算需要补充的偏移值即可，同时可以把容器的滚动条隐藏避免干扰。

修改后的JS代码 #

const slideTrack = document.querySelector(".slide-track");
const slideItems = document.querySelectorAll(".slide");
const slider = document.querySelector(".slider");
// 累计轨道的总偏移量，初始为0
let totalOffset = 0;

slideItems.forEach(slide => {
  slide.addEventListener('click', () => {
    // 取slider容器距离视口左侧的坐标作为基准
    const sliderLeft = slider.getBoundingClientRect().left;
    // 取当前点击项距离视口左侧的坐标
    const slideLeft = slide.getBoundingClientRect().left;
    // 计算当前项距离slider左边缘的距离，就是本次需要新增的偏移量
    const addOffset = slideLeft - sliderLeft;
    totalOffset += addOffset;

    slideTrack.style.transition = `transform 1000ms ease`;
    slideTrack.style.transform = `translateX(-${totalOffset}px)`;
  })
})

配套CSS调整 #

把.slider的overflow: scroll改成overflow-x: hidden，避免出现横向滚动条：

.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  /* 隐藏横向滚动条 */
  overflow-x: hidden;
  position: relative;
  width: 960px;
}

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