JS DIV列表自動滾動帶停頓,滾動到底部後自動滾動到頂部
阿新 • • 發佈:2020-10-21
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); } }