JS 实现可停顿的垂直滚动实例代码

var ScrollMiddle = {
     'Odiv':document.getElementById('comment'), // 目标DOM    
     'Oli': document.getElementById('comment').getElementsByTagName('li'), 
     'times':30,      // 配置滚动时间   
     'delay':1000,    // 配置暂停的时间  
     inint:function(){
this.size = this.Oli.length;
this.height = 59;
this.countHeight =this.size * this.height;
this.Odiv.innerHTML+=this.Odiv.innerHTML;
this.timer = null;
     },
     scroll:function(){
var _this = this;
_this.inint();
function scrolls(){

  var scrollValue = _this.Odiv.scrollTop;
  var sub_timer = null;
  var num=0;
  if(scrollValue>=_this.countHeight){
    _this.Odiv.scrollTop = 0;
  }else{
    _this.Odiv.scrollTop++;
    if(scrollValue%_this.height==0){
      clearInterval(_this.timer)
      function delay(){
 num++;
 if(num==3){
   num=0;
   clearInterval(sub_timer);
   sub_timer = null;
   clearInterval(_this.timer)
   _this.timer = setInterval(scrolls,_this.times);
   return false;
 }
      }
      sub_timer = setInterval(delay,_this.delay)
    }
  }
}
this.timer = setInterval(scrolls,_this.times);
     }
   }

调用方法：

ScrollMiddle.scroll();

HTML 结构：

  

  ......

CSS结构：

#comment{
  width:200px;
  height:200px;
  overflow:hidden;  
}

以上这篇JS 实现可停顿的垂直滚动实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。