彻底搞懂JS无缝滚动代码

2023年6月11日下午1:18 • JavaScript

下面是我对“彻底搞懂JS无缝滚动代码”的完整攻略。

背景介绍

无缝滚动是网页中常见的交互效果，例如图片轮播、新闻滚动等。JavaScript是实现无缝滚动最常用的方法之一，而JS实现无缝滚动的方式又有很多种。本攻略将介绍其中一种实现方式。

具体实现方法

HTML部分

首先需要在HTML中创建一个装载滚动内容的容器元素，例如DIV：

<div id="scroll-container">
  <ul id="scroll-content">
    <li>第一条滚动内容</li>
    <li>第二条滚动内容</li>
    <li>第三条滚动内容</li>
    ...
  </ul>
</div>

可以看到，我们在DIV中创建了一个UL元素，而UL元素中则放置了需要滚动的内容，即多个LI。

CSS部分

需要为容器元素和滚动内容设置样式，使之达到无缝滚动的效果。这里我们需要用到一些CSS3属性，需要注意一下浏览器兼容性问题。

#scroll-container {
  width: 300px; /* 容器宽度 */
  overflow: hidden; /* 隐藏超出容器部分 */
}

#scroll-content {
  display: flex; /* 布局方式为flexbox */
  animation: scroll 10s linear infinite; /* 滚动动画 */
}

@keyframes scroll {
  0% { transform: translateX(0); } /* 初始位置 */
  100% { transform: translateX(-100%); } /* 移动到最后一个LI的位置 */
}

li {
  flex: 0 0 300px; /* LI占据的空间 */
  padding: 10px; /* LI内部间距 */
}

可以看到，我们设置了容器元素的宽度和overflow属性，以及滚动内容的布局方式和滚动动画。LI元素的宽度可以根据实际情况来设置。

JavaScript部分

最后一步是使用JavaScript实现循环滚动。我们需要在LI末尾再添加一批与前面相同的内容，以实现循环滚动的效果。另外，我们还需要在滚动开始前判断滚动内容的总长度是否大于容器的宽度，若是，则需要进行滚动，否则无需滚动。

var container = document.getElementById('scroll-container');
var content = document.getElementById('scroll-content');
var lis = content.getElementsByTagName('li');

// 复制内容，生成新的LI
for (var i = 0; i < lis.length; i++) {
  content.appendChild(lis[i].cloneNode(true));
}

// 如果内容总长度大于容器宽度，进行滚动
if (content.offsetWidth > container.offsetWidth) {
  runScroll();
}

function runScroll() {
  setTimeout(function() {
    // 判断是否已滚动到最后一个LI
    if (container.scrollLeft + container.offsetWidth >= content.offsetWidth) {
      container.scrollLeft = 0;
    } else {
      container.scrollLeft += 1;
    }
    runScroll();
  }, 20);
}

可以看到，我们先对LI进行复制，再进行判断和滚动的处理。