我的div滑块能否通过当前原生JS脚本实现无限左滑？

你的当前实现有个致命问题：当inner的scrollLeft减到0之后，再执行scrollLeft -= 210不会有任何效果，滑块会直接停住，根本没法无限循环。

而且用setInterval硬改scrollLeft配合CSS transition，还容易出现动画卡顿、时序错乱的问题——比如如果定时器触发时上一次的transition还没结束，滚动行为会叠加，导致滑动节奏混乱。

要实现无限左滑，得这么改 #

核心思路是在滑块滑到边界时，瞬间重置滚动位置，让视觉上形成无缝循环，给你两种可行方案：

方案1：元素复制（最常用的无缝滚动写法） #

1. 给你的inner容器开头复制最后2个元素，结尾复制最前2个元素（数量和单个元素宽度对应，确保滚动衔接自然）。
2. 初始把inner的scrollLeft设为单个元素宽度的倍数（比如跳过开头复制的元素，直接定位到第一个原始元素）。
3. 监听滚动事件，当滚动到复制的元素区域时，瞬间把scrollLeft重置到对应的原始元素位置——用户完全察觉不到这个跳转，看起来就是无限滚动。

方案2：边界直接重置（更简单，适合你的9个元素场景） #

不需要额外复制元素，直接在定时器回调里判断滚动位置：

const inner = document.querySelector('.inner');
const itemWidth = 210;
const totalWidth = itemWidth * 9; // 9个元素总宽度

// 初始先把滑块定位到最右侧，第一次左滑从最后一个元素开始
inner.scrollLeft = totalWidth;

let scrollTimer = setInterval(() => {
  inner.scrollLeft -= itemWidth;
  
  // 滑到最左边界时，瞬间跳回总宽度位置，继续循环
  if (inner.scrollLeft <= 0) {
    inner.scrollLeft = totalWidth;
  }
}, 1000);

// 加个鼠标悬停暂停的逻辑，提升体验
inner.addEventListener('mouseenter', () => clearInterval(scrollTimer));
inner.addEventListener('mouseleave', () => {
  clearInterval(scrollTimer);
  scrollTimer = setInterval(() => {
    inner.scrollLeft -= itemWidth;
    if (inner.scrollLeft <= 0) inner.scrollLeft = totalWidth;
  }, 1000);
});

这种方式要确保你的inner元素加了transition: scroll-left 1s ease;（或者对应你的动画时长），外层容器设置固定宽度且overflow: hidden。

额外提醒 #

别用setInterval硬改scrollLeft配合transition，更好的做法是用requestAnimationFrame来控制滚动，或者直接用CSS动画结合@keyframes——不过对于需要交互（比如悬停暂停）的场景，JS控制更灵活。

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