JS间歇滚动与无缝滚动实现原理及代码示例

本文详细解析JavaScript实现间歇滚动与无缝滚动的核心逻辑。通过CSS设置overflow:hidden隐藏溢出内容，利用定时器不断修改scrollTop值。无缝滚动在scrollTop超过盒子高度时重置为0，间歇滚动则在此基础上增加setTimeout控制停顿。文章还探讨了setInterval函数传参方式的区别，并提供完整HTML/CSS/JS代码供参考。

JavaScript滚动实现代码

具体实现代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title>
 <style>
  *{margin:0;padding:0;}
  .box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;}
  .block{position: relative;width: 500px;height: 400px;overflow: hidden;}
  .item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;}
  .item:nth-child(2n){background: #000}
 </style>
 <script>
  var scrollUp=(function(){
   return function(json){
    var objScroll = document.getElementById(json.id);
    objScroll.scrollTop = 0;
    objScroll.innerHTML += objScroll.innerHTML;
    if(json.on){
     function scrollIng(){
      if(objScroll.scrollTop >= objScroll.scrollHeight) {
       objScroll.scrollTop = 0;
      }else{
       objScroll.scrollTop ++; 
      } 
     }
     var myScroll = setInterval(function(){scrollIng()},30);
     objScroll.onmouseover = function(){
      clearInterval(myScroll);
     }
     objScroll.onmouseout = function(){
      myScroll = setInterval(function(){scrollIng()},30);
     }
    }else{
     var timer;
     function startScroll(){
      timer=setInterval(function(){scrollUp()},30);
      objScroll.scrollTop++;
     }
     function scrollUp(){
      if(objScroll.scrollTop % json.height==0){
       clearInterval(timer);
       setTimeout(startScroll,2000);
      }else{
       objScroll.scrollTop++;
       if(objScroll.scrollTop >= objScroll.scrollHeight/2){
        objScroll.scrollTop =0;
       }
      }
     }
     setTimeout(startScroll,1000);
    }
   }
  })()
  window.onload=function(){
   //on:间歇滚动/无缝滚动 height:间歇滚动的高度
   scrollUp({on:true,id:'block'});
   scrollUp({id:'block2',height:120});
  }
  
 </script>
</head>
<body>
 <div class="box">
  <div class="block" id="block">
   <div class="item">1无缝滚动</div>
   <div class="item">2无缝滚动</div>
   <div class="item">3无缝滚动</div>
   <div class="item">4无缝滚动</div>
   <div class="item">5无缝滚动</div>
   <div class="item">6无缝滚动</div>
   <div class="item">7无缝滚动</div>
   <div class="item">8无缝滚动</div>
   <div class="item">9无缝滚动</div>
   <div class="item">10无缝滚动</div>
   <div class="item">11无缝滚动</div>
   <div class="item">12无缝滚动</div>
   <div class="item">13无缝滚动</div>
   <div class="item">14无缝滚动</div>
   <div class="item">15无缝滚动</div>
  </div>
 </div>
 <div class="box">
  <div class="block" id="block2">
   <div class="item">1间歇滚动</div>
   <div class="item">2间歇滚动</div>
   <div class="item">3间歇滚动</div>
   <div class="item">4间歇滚动</div>
   <div class="item">5间歇滚动</div>
   <div class="item">6间歇滚动</div>
   <div class="item">7间歇滚动</div>
   <div class="item">8间歇滚动</div>
   <div class="item">9间歇滚动</div>
   <div class="item">10间歇滚动</div>
   <div class="item">11间歇滚动</div>
   <div class="item">12间歇滚动</div>
   <div class="item">13间歇滚动</div>
   <div class="item">14间歇滚动</div>
   <div class="item">15间歇滚动</div>
  </div>
 </div>
</body>
</html>

关键实现逻辑与技术细节

实现过程中需注意以下关键点： 1. CSS样式设置：容器必须设置 `overflow: hidden` 以隐藏超出部分的内容。 2. 功能区分：该方案支持两种模式，即间歇滚动和无缝滚动。 3. 核心逻辑： - 首先，复制一份与原列表完全相同的内容追加到末尾，以支持无缝衔接。 - 无缝滚动：通过定时器持续增加 `scrollTop` 的值。当 `scrollTop` 大于盒子高度时，立即将 `scrollTop` 重置为 0，从而实现视觉上的无限循环。 - 间歇滚动：在无缝滚动的逻辑基础上，引入 `setTimeout` 进行延时控制。当 `scrollTop` 到达指定的高度时停止滚动，等待一段时间后继续执行。 4. 技术疑问：代码中使用 `setInterval(function(){scrollIng()}, 30);` 可以正常执行，而 `setInterval('scrollIng()', 30);` 则无效。这涉及到JavaScript中函数引用与字符串执行机制的区别，具体原理建议查阅相关文档或向专家请教。

JavaScript实现间歇与无缝滚动的核心逻辑与注意事项

滚动效果概述与演示说明

JavaScript滚动实现代码

关键实现逻辑与技术细节

总结与致谢

实用工具推荐