JS实现div的自动滚动

最新推荐文章于 2024-06-19 11:12:11 发布

最新推荐文章于 2024-06-19 11:12:11 发布 · 547 阅读

web 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现div元素自动滚动的方法。通过设置定时器使div内部的内容能够自动向上滚动，并且可以根据需要调整滚动的速度和停留的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JS实现div的自动滚动。代码如下：

<div id="show" style="overflow:hidden;height:210px;">
</div>
<script>
function startmarquee(lh,speed,delay){ 
 	var t; 
 	var oHeight = 210; /** div的高度 **/
	var p=false;
	var o=document.getElementById("show"); 
	var preTop = 0;
	o.scrollTop = 0; 
	function start(){ 
		t=setInterval(scrolling,speed); 
		o.scrollTop += 1; 
	} 
	function scrolling(){ 
    	if(o.scrollTop%lh!=0 && o.scrollTop%(o.scrollHeight-oHeight-1)!=0){
    		preTop = o.scrollTop;
    		o.scrollTop+=1;
    		if(preTop >= o.scrollHeight || preTop==o.scrollTop){
    			o.scrollTop = 0;
    		}
    	}else{
    		clearInterval(t); 
			setTimeout(start,delay); 
    	}
	} 
	setTimeout(start,delay); 
} 
startmarquee(20,20,1500); 
/**startmarquee(一次滚动高度,速度,停留时间);**/ 
</script>