原生js实现无缝循环滚动效果

原创已于 2024-05-21 16:43:44 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-03-28 22:39:07 首次发布

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

文章描述了如何使用原生JavaScript实现一个循环滚动效果，并在2024年进行了优化，通过封装函数处理滚动容器的动态添加和位置调整。作者分享了HTML、CSS和优化后的JavaScript代码片段。

封装插件了

一步到位https://blog.youkuaiyun.com/chuenst/article/details/139095523

原生js实现如下图循环滚动效果

请添加图片描述

核心代码

<div class="scroll">
  <div class="blist" id="scrollContainer">
    <div class="bitem">
    </div>
    ......
    <div class="bitem">
    </div>
  </div>
</div>
<script>
setTimeout(() => {
  let speed = 10; // 调整滚动速度，单位是毫秒  
  let scrollContainer = document.getElementById('scrollContainer');
  let contentHeight = scrollContainer.offsetHeight;
  let top = 0
  scrollContainer.style.position = 'relative';
  scrollContainer.style.top = top + 'px';
  scrollContainer.append(scrollContainer.cloneNode(scrollContainer))
  setInterval(() => {
    if (top * -1 < contentHeight) top--
    else top = 0
    scrollContainer.style.top = top + 'px';;
  }, speed);
}, 200)
</script>

20240507优化

//html
<div class="scroll">
  <div class="scrollContainer" ref="scrollContainer">
    <div class="l-item" v-for="(item, index) in leftList" :key="index">
      ...
    </div>
  </div>
</div>

//css
.scroll {
  height: 800px;
  overflow: hidden;
}

//js
//封装方法
function toScroll(e: any) {
  let sc = e.el;
  if (sc && typeof sc === "object" && sc !== null) {
    let contentHeight = sc.offsetHeight;
    if (contentHeight < sc.parentElement.offsetHeight) return
    let distance = 0
    if (e.direction == 'down') distance = -contentHeight
    sc.append(sc.cloneNode(sc))
    let timer = null
    if (timer) clearInterval(timer)
    timer = setInterval(() => {
      if (e.direction == 'up') {
        if (distance * -1 < contentHeight) distance--
        else distance = 0
        sc.style.transform = 'translate(0px, ' + distance + 'px)';;
      } else if (e.direction == 'down') {
        if (distance < 0) distance++
        else distance = -contentHeight
        sc.style.transform = 'translate(0px, ' + distance + 'px)';
      }

    }, e.step || 3);
  }
}
//调用
toScroll({
  el: scrollContainer.value,
  step: 3,
  direction: 'up'
})