图片自动滚动容器左侧显示上一张图部分，是否需使用jQuery？

问题现象 #

向右自动滚动轮播时，当前显示图片的左侧会露出上一张图片的部分，且该露出区域随每次滚动逐渐变大，询问是否需要使用jQuery解决该问题。

原因分析 #

1. 宽度计算偏差：给img设置了padding: 0.5px，但计算滚动宽度时用的是clientWidth（不包含padding），实际每张图片占据的宽度是offsetWidth（包含padding），导致每次滚动距离小于实际需要的宽度，累积误差越来越大。
2. 平滑滚动干扰：scroll-container设置的scroll-behavior: smooth会让滚动有动画过渡，定时器重复触发滚动时，可能读取到未完成滚动的中间值，进一步加剧误差。
3. 边界判断不精准：右侧滚动的边界条件用不含padding的imageWidth计算，导致提前触发回到开头的逻辑，同时滚动距离始终不足。

解决方案 #

不需要使用jQuery，通过调整CSS和原生JS逻辑即可解决，以下是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Container</title>
  <style>
    .scroll-container {
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      height: auto;
    }

    div.scroll-container img {
      margin: 0 0.5px;
      width: 100%;
      height: auto;
      display: inline-block;
    }

    div.hz-scroll {
      position: relative;
    }

    .dots-container {
      display: flex;
      justify-content: left;
      margin-bottom: 1.2em;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 0 5px;
      transition: background-color 0.3s ease-in-out;
    }

    .dot.active {
      background-color: #2d2d86;
    }

    .images {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 2em;
    }
  </style>
</head>

<body>
  <div class="hz-scroll">
    <div class="images">
      <div class="scroll-container" id="scroll-container">
        <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
      </div>
      <div class="dots-container" id="dots-container">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
  </div>
</body>
<script>
  let scrollInterval;
  const scrollContainer = document.getElementById('scroll-container');
  let imageWidth = scrollContainer.querySelector('img').offsetWidth;

  window.addEventListener('resize', () => {
    imageWidth = scrollContainer.querySelector('img').offsetWidth;
  });

  function scrollItems(direction) {
    scrollContainer.style.scrollBehavior = 'auto';
    
    if (direction === 'left') {
      if (Math.round(scrollContainer.scrollLeft) === 0) {
        scrollContainer.scrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
      } else {
        scrollContainer.scrollLeft -= imageWidth;
      }
    } else if (direction === 'right') {
      const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
      if (Math.round(scrollContainer.scrollLeft) >= maxScrollLeft) {
        scrollContainer.scrollLeft = 0;
      } else {
        scrollContainer.scrollLeft += imageWidth;
      }
    }
  }

  function startAutoScroll() {
    scrollInterval = setInterval(() => {
      scrollItems('right');
    }, 2000);
  }

  startAutoScroll();

  function updateActiveDot() {
    const dotsContainer = document.getElementById('dots-container');
    const dots = dotsContainer.querySelectorAll('.dot');
    const activeIndex = Math.floor(scrollContainer.scrollLeft / imageWidth);

    dots.forEach((dot, index) => {
      dot.classList.toggle('active', index === activeIndex);
    });
  }

  scrollContainer.addEventListener('scroll', updateActiveDot);
  updateActiveDot();
</script>

</html>

关键修改说明 #

• 间距调整：将img的padding改为margin，避免padding影响图片宽度计算。
• 宽度修正：用offsetWidth获取图片实际占据的宽度（包含margin），确保每次滚动距离准确。
• 边界优化：重新计算最大滚动距离，确保滚动到末尾时准确回到开头。
• 误差规避：用Math.round判断滚动位置，避免浮点小数导致的边界判断错误；用Math.floor计算激活点索引，防止滚动过程中索引跳变。
• 响应式适配：添加窗口resize监听，重新计算图片宽度，适配不同屏幕尺寸。

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