如何实现内容可循环的水平滚动条（horizontal-scroll-bar）

你现有的HTML和CSS已经实现了基础的水平滚动，要实现向右滚动到末尾后自动接续开头内容的循环效果，可以通过JavaScript监听滚动事件，结合内容克隆和滚动位置重置来实现，具体步骤如下：

1. 调整HTML结构 #

先把滚动容器内的内容包裹到独立容器中，方便后续克隆和宽度计算：

<!doctype html>
<html>
 <head>
  <title>LoopingScroll</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
<table class="table"> 
    <thead>
        <tr> 
            <th>TestingA</th> 
            <th>TestingB</th>
            <th>TestingC</th>
        </tr> 
    </thead> 
    <tbody>   
        <tr class="active"> 
            <td>TestingD</td> 
            <td>TestingE</td>
            <td class="LoopingScroll"> 
                <!-- 新增内部容器包裹滚动内容 -->
                <div class="scroll-content">
                    Testing01 Testing02 Testing03 Testing04 Testing05 Testing06 Testing07 Testing08
                </div>
            </td> 
        </tr> 
     </tbody> 
</table> 
  <script src="script.js"></script>
 </body>
</html>

2. 优化CSS（可选） #

原CSS可保留，若想提升滚动流畅度，可添加平滑滚动属性：

.LoopingScroll{
  overflow-x: auto;
  white-space: nowrap;
  max-width: 200px;
  /* 可选：开启平滑滚动 */
  scroll-behavior: smooth;
}

.scroll-content {
  display: inline-block;
}

3. JavaScript实现向右循环逻辑 #

在script.js中添加以下代码，实现核心循环效果：

const scrollContainer = document.querySelector('.LoopingScroll');
const content = document.querySelector('.scroll-content');
// 克隆一份原始内容用于拼接
const clonedContent = content.cloneNode(true);

// 初始就在容器内添加两份相同内容
scrollContainer.appendChild(clonedContent);

// 监听滚动事件
scrollContainer.addEventListener('scroll', () => {
  const contentWidth = content.offsetWidth;
  // 当滚动距离超过原始内容宽度时，重置滚动位置，实现无缝循环
  if (scrollContainer.scrollLeft >= contentWidth) {
    scrollContainer.scrollLeft -= contentWidth;
  }
});

补充：实现向左循环（次要需求） #

如果需要支持向左滚动到开头后接续末尾内容，只需在滚动事件中添加向左判断逻辑：

scrollContainer.addEventListener('scroll', () => {
  const contentWidth = content.offsetWidth;
  // 向右循环逻辑
  if (scrollContainer.scrollLeft >= contentWidth) {
    scrollContainer.scrollLeft -= contentWidth;
  }
  // 向左循环逻辑
  else if (scrollContainer.scrollLeft <= 0) {
    scrollContainer.scrollLeft += contentWidth;
  }
});

原理说明 #

• 初始在滚动容器内添加克隆内容，用户滚动到原始内容末尾时，会看到完全一致的克隆内容，视觉上形成接续效果。
• 当滚动距离超过原始内容宽度时，立刻重置滚动位置，操作速度极快，用户几乎察觉不到，从而实现无限循环的视觉体验。

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