1. 程式人生 > 實用技巧 >JS DIV列表自動滾動帶停頓,滾動到底部後自動滾動到頂部

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); } }