10行原生JS实现文字无缝滚动(超简单)

当根据文章中提供的攻略，我们可以用不到十行的原生JS代码实现文字无缝滚动的效果。下面逐步解读这个攻略的实现过程：

第一步：获取DOM元素

首先，需要获取到需要滚动的文字所在的DOM元素。这可以通过document.querySelector()方法来获取。在示例中，需要滚动的文字是包含在一个<div>元素中的，其class为scroll-wrap。

const wrapper = document.querySelector('.scroll-wrap');

第二步：克隆DOM元素

由于文字需要无缝滚动，所以需要先将DOM元素克隆一份，再将其添加到原DOM元素的后面，以便实现无缝滚动的效果。

const cloneNode = wrapper.cloneNode(true);
wrapper.appendChild(cloneNode);

注：cloneNode()方法一定要带上true参数才能成功克隆一个节点的所有属性和子节点。

第三步：滚动效果

接下来，通过对克隆后的DOM元素的transform属性进行不断的修改来实现滚动的效果。

let timer = setInterval(() => {
  let d = wrapper.scrollTop++;
  if (d >= cloneNode.offsetTop) {
    wrapper.scrollTop = 0;
  }
}, 20);

这里通过设置一个定时器，每20ms对DOM元素的scrollTop属性进行自增来实现滚动的效果。每次滚动结束的判断条件是克隆DOM节点的高度已经被完全滚过去了，此时需要将DOM元素的scrollTop属性重置为零。

示例说明一

假如需要将滚动的文字换成一个<ul>元素中的数据，该怎么进行修改呢？下面给出一个简单的修改示例。

const list = document.querySelector('.scroll-list'); // 获取需要滚动的列表
const cloneList = list.cloneNode(true); // 克隆列表
list.insertAdjacentElement('afterend', cloneList); // 添加克隆列表到原列表后面

let timer = setInterval(() => {
  let d = list.scrollTop++;
  if (d >= cloneList.offsetTop) {
    list.scrollTop = 0;
  }
}, 20);

示例说明二

如果需要在滚动的过程中加入鼠标悬停事件来停止滚动，该怎么实现呢？下面是一个修改示例。

const wrapper = document.querySelector('.scroll-wrap');
const cloneNode = wrapper.cloneNode(true);
wrapper.appendChild(cloneNode);

let timer = setInterval(() => {
  let d = wrapper.scrollTop++;
  if (d >= cloneNode.offsetTop) {
    wrapper.scrollTop = 0;
  }
}, 20);

wrapper.addEventListener('mouseenter', () => {
  clearInterval(timer); // 鼠标停留时清除定时器
});

wrapper.addEventListener('mouseleave', () => {
  timer = setInterval(() => { // 鼠标离开时再次添加定时器
    let d = wrapper.scrollTop++;
    if (d >= cloneNode.offsetTop) {
      wrapper.scrollTop = 0;
    }
  }, 20);
});

在示例中添加了wrapper.addEventListener()来监听滚动元素的鼠标悬停事件，当鼠标悬停时，清除滚动效果的定时器；而当鼠标离开时，重新创建定时器，实现滚动效果的重新开始。