技術標籤：js基礎

效果：

兩種方式，1）利用css的margin值來實現滾動，2）利用dom元素身上的scrollTop來實現

html

<div class="JTableBody noScrollBar" id="scrollContent">
	<div class="oneBodyRow" id="firstLine">第1行</div>
	<div class="oneBodyRow">第2行</div>
	<div class="oneBodyRow">第3行</div>
	<div class="oneBodyRow">第4行</div>
	<div class="oneBodyRow">第5行</div>
	<div class="oneBodyRow">第6行</div>
</div>
 

第一種：（CSS帶過渡的，推薦）

function cssScroll(rowHei=30,speed=1500,delay=1000){
        //每行行高//滾動速度/毫秒	//開始滾動的延遲/毫秒
		//此方法使用css模擬列表滾動，帶有動畫效果，推薦使用
		var isStop = false;
		var cont = document.getElementById('firstLine');
		if (cont) {
			var parCont = document.getElementById('scrollContent');
			var maxMargin = parCont.offsetHeight - parCont.scrollHeight;
			parCont.onmouseover = function() {
				isStop = true;
			} //滑鼠移入，停止滾動
			parCont.onmouseout = function() {
				isStop = false;
			} //滑鼠移出，繼續滾動

			cont.style.marginTop = 0;
			cont.style.transition = 'margin 0.3s';
			var startScroll = () => {
			    if (isStop) {
			    	console.log("暫停中");
			    } else {
			    	let hei = parseInt(cont.style.marginTop.replace("px", "")) || 0;
			    	if (hei <= maxMargin) {
			    		cont.style.transition = 'none'; //暫時關閉動畫，讓其直接滾動到頂
			    		cont.style.marginTop = 0;
			    		setTimeout(function() { //再開啟動畫
			    			cont.style.transition = 'margin 0.3s';
			    		}, 10)
			    	} else {
			    		cont.style.marginTop = parseInt(hei - rowHei) + "px";
			    	}
		    	}
		    }
		    setTimeout(fn => {
		    	clearInterval(tbTimer);
		    	tbTimer = setInterval(startScroll, speed);
		    }, delay)
	    } else { //dom還沒渲染出來，給他再呼叫一下
	    	setTimeout(e => {
	    		cssScroll()
	    	}, 666)
	    }
}
 

第二種：scrollTop屬性

function jsScroll(rowHei=30,speed=1500,delay=1000){
			//直接利用js實現，有點卡的感覺，沒有動畫，效果不佳，只提供思路，可以再琢磨優化
		var isStop = false;
		var cont = document.getElementById("scrollContent");
		cont.scrollTop = 0;
		cont.onmouseover = function() {
			isStop = true;
		}
		cont.onmouseout = function() {
			isStop = false;
		}
		function startScroll() {
			if (isStop) {
				console.log("暫停中");
			} else {
				if (cont.scrollTop >= (cont.scrollHeight - cont.offsetHeight)) {
					cont.scrollTop = 0;
				} else {
					cont.scrollTop = parseInt(cont.scrollTop) + rowHei;
				}
			}
		}
		setTimeout(fn => {
			clearInterval(tbTimer);
			tbTimer = setInterval(startScroll, speed);
		}, delay)
}
 

原始碼檔案，寫的不錯請來個Start