连续滚动JS

JS中的连续滚动可以让网页上的内容以一定的速度连续滚动，让页面更加流畅和有趣。本文将介绍如何使用JS实现连续滚动。

基本思路

连续滚动的基本思路是将要滚动的内容复制一遍，然后通过定时器不断地滚动，当第一个复制的内容滚出可视区域时，将其放置在最后一个复制的位置，形成一个循环的效果。

实现方法

下面是一个基本的实现连续滚动的JS代码片段：

// 获取要滚动的元素
let box = document.querySelector('.box');
// 复制要滚动的元素
let boxClone = box.cloneNode(true);
// 将复制的元素添加到原始元素的后面
box.parentNode.appendChild(boxClone);

// 滚动速度，每10毫秒移动3个像素
let speed = 3;

// 定时器
let timer = setInterval(() => {
  // 获取当前滚动的位置
  let scrollTop = box.scrollTop;
  // 如果当前滚动的位置已经大于等于复制元素的高度，则将滚动位置重置为0
  if (scrollTop >= boxClone.scrollHeight) {
    scrollTop = 0;
  }
  // 滚动
  box.scrollTop = scrollTop + speed;
}, 10);

代码解释：

1. 首先获取要滚动的元素，可以通过.querySelector()方法或其他选择器方法获取。
2. 接着，复制要滚动的元素，可以通过.cloneNode()方法来实现。注意，其中的true参数表示复制所有的子节点，如果为false则只复制元素本身。
3. 将复制的元素添加到原始元素的后面，可以通过.parentNode.appendChild()方法来实现。将复制元素添加到原始元素的后面是为了实现循环滚动的效果。
4. 然后设置滚动的速度，这里设置每10毫秒移动3个像素。
5. 最后，通过定时器实现滚动，每10毫秒滚动一次。如果当前滚动的位置已经大于等于复制元素的高度，则将滚动位置重置为0，实现循环滚动的效果。