纯JS实现文字上下【渐进】滚动（不是逐行哦）

最新推荐文章于 2025-07-17 03:02:41 发布

骆小胖

最新推荐文章于 2025-07-17 03:02:41 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 教学笔录前端积累文章标签： JS 教学笔录前端积累 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819047

前端积累同时被 3 个专栏收录

105 篇文章

订阅专栏

教学笔录

73 篇文章

订阅专栏

63 篇文章

订阅专栏

本文介绍如何使用纯JS实现文字或新闻竖直方向滚动的效果，并详细解释了获取元素高度的方法，包括clientHeight、offsetHeight、scrollHeight等概念。

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

【前言】

纯JS实现文字或新闻竖直方向滚动，先看个案例

【主体】

（1）JS获取数值方向滚动距离selector.scrollTop

（2）JS获取元素高度（包含边框和内边距）selector.offectHeight

（3）高度获取

1、clientHeight：height+上下padding（内部可视区高度）

2、offsetHeight：height+上下padding+上下border-width（div的可视高度）

3、scrollHeight：内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

4、height：在几个浏览器中都是undefined

5、style.height：遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的

（4）本例中我们用到了offectHeight来获取元素高度

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字滚动</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		ul li,ol li{
			list-style-type: none;
		}
		a{
			text-decoration: none;
		}
		/*代码主体*/
		.main{
			width: 300px;
			height: 400px;
			border: 1px solid rgba(0,0,0,0.3);
			margin: 10px auto;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			overflow-y: hidden;
		}
		.show1 li,.show2 li{
			width: 100%;
			height: 100px;
			border-bottom: 1px solid rgba(0,0,0,0.2);
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
			font-size: 26px;
			cursor: pointer;
		}
	</style>
</head>
<body>
<div class="main">
	<ul class="show1">
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
		<li>新闻4</li>
		<li>新闻5</li>
		<li>新闻6</li>
		<li>新闻7</li>
		<li>新闻8</li>
	</ul>
	<ul class="show2">
		
	</ul>
</div>
<script type="text/javascript">
	var main = document.getElementsByClassName("main")[0];
	var show1 = document.getElementsByClassName("show1")[0];
	var show2 = document.getElementsByClassName("show2")[0];
	var timeId;
	show2.innerHTML = show1.innerHTML;
	timeId = setInterval(play,25);
	function play(){
		if (main.scrollTop >= show1.offsetHeight) {
			main.scrollTop=0;
		}else{
			main.scrollTop++;
		}
	}
	play();
	main.onmouseover = function(){
		clearInterval(timeId)
	};
	main.onmouseout = function(){
		timeId = setInterval(play,25);
	};
</script>
</body>
</html>