JS DIV列表自動滾動帶停頓,滾動到底部後自動滾動到頂部

 setInterval — 間隔執行函數;element.scrollTop — 元素滾動條距頭部的距離;

因為執行代碼需要時間,所以最終動態時間會比設置的要慢

    var slide = new Slide({
        id:'grid-body',//元素ID
        onceHeight:43,//每行高度
        onceTime:500,//滑動一次用時毫秒 
        wait:1500//滑動後停頓毫秒
    });
    slide.start();
function Slide(options){
    this.element = document.getElementById(options.id); //元素
    this.onceHeight = options.onceHeight || 40;//滾動距離
    this.onceTime = options.onceTime || 200;//滾動一次需要的時間
    this.wait = options.wait || 1000;//等待時長(滾動一次後多久滾動下一次 單位:毫秒)
    this.frame = 1;//幀數
    this.frequency = this.onceTime / (this.onceHeight / this.frame);
    this.waitPoint = this.onceTime / this.frequency;
    this.coming = this.waitPoint + this.wait / this.frequency;
    this.prevFrame = this.element.scrollHeight / (this.onceTime / this.frequency);
    this.start = function(){
        let _this=this, j=this.waitPoint, isPrev=false;
        setInterval(function(){
            if(isPrev){//滾回頂部
                _this.element.scrollTop -= _this.prevFrame; 
                //判斷是否滾動到頂部;
                if(_this.element.scrollTop <= 0){
                    //開始往下滑動
                    isPrev = false;
                    //準備等待
                    j = _this.waitPoint;
                }
            }else{
                j++;
                //等待結束
                if(j >= _this.coming){
                    //準備滑動
                    j = 0;
                    //判斷是否滾動到底部;
                    if(_this.element.scrollTop + _this.element.clientHeight >= _this.element.scrollHeight){
                        //開始往上滑動
                        isPrev = true;return;
                    }
                }
                //等待……
                if(j >= _this.waitPoint)return;
                //設置滾動條到頂部距離
                _this.element.scrollTop += _this.frame; 
            }
        },this.frequency);
    }
}