如何同步轮播滑块指示器位置与滚动位置并修复指示器溢出问题

问题核心原因 #

你当前的指示器越界问题，本质是left值计算时没有扣除指示器自身的宽度占比，导致滚动到最后一页时，指示器右端超出灰色容器边界。同时原逻辑中对滚动百分比取整的操作也会导致指示器滑动不跟手，切换不同单屏显示数量时适配异常。

修改后的moveIndicator函数 #

moveIndicator() {
  const indicatorWidth = 100 / this.totalPages;
  // 保留精确滚动占比，取消取整操作
  const scrollPercentage = 100 * (this.slider.scrollLeft / (this.slider.scrollWidth - this.slider.clientWidth));
  // 指示器可移动的总范围为「容器总宽度 - 指示器自身宽度」，按滚动比例分配偏移量
  const leftOffset = scrollPercentage * (1 - indicatorWidth / 100);

  this.sliderIndicator.style.width = `${indicatorWidth}%`;
  this.sliderIndicator.style.left = `${leftOffset}%`;
}

多场景兼容说明 #

该修改天生支持单屏显示1/2/3张幻灯片的场景：

• 你在initialise方法中已经根据单屏显示的幻灯片数量slidesPerPage动态计算了总页数totalPages，所以指示器宽度会自动适配总页数
• 偏移量计算基于滚动占比和可用移动空间，无论单屏显示几张，指示器最大偏移量都会刚好让指示器右端对齐容器右边界，不会出现越界问题

内容的提问来源于stack exchange，提问作者D-Money