變量解釋：
speed：滾動的速度；
delay：暫停的時長；
scrollTop ：滾動的高度；
scrollHeight：滾動元素的高度；
1. 無縫垂直滾動（無停歇的一直滾動）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body{
background-color: #FFFFFF;
}
.out{
overflow: hidden;
height: 21px;
margin-top: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
window.onload = function(){
var area = document.getElementById("roll");
area.innerHTML += area.innerHTML;
function scroll(){
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
setInterval(scroll,speed);
}
</script>
</body>
</html>
2. 間歇性垂直滾動（一次滾動一條）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body{
background-color: #FFFFFF;
}
.out{
overflow: hidden;
height: 21px;
margin-top: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
var delay = 2000;
var height = 21;
var time;
window.onload = function(){
var area = document.getElementById("roll");
area.innerHTML += area.innerHTML;
function scroll(){
if(area.scrollTop % height == 0){
clearInterval(time);
setTimeout(start,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop = 0;
}
}
}
function start(){
time = setInterval(scroll,speed);
area.scrollTop++;
}
setTimeout(start,delay);
}
</script>
</body>
</html>
3. 間歇性垂直滾動（一次滾動兩條）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body{
background-color: #FFFFFF;
}
.out{
overflow: hidden;
height: 42px;
margin-top: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
var delay = 2000;
var height = 42;
var time;
window.onload = function(){
var area = document.getElementById("roll");
var counts = $("#roll").find("div").length;
area.innerHTML = area.innerHTML + area.innerHTML + area.innerHTML;
function scroll(){
if(area.scrollTop % height == 0){
clearInterval(time);
setTimeout(start,delay);
}else{
area.scrollTop++;
if(counts % 2 ==0 ){
if(area.scrollTop >= area.scrollHeight/3){
area.scrollTop = 0;
}
}else{
if(area.scrollTop >= area.scrollHeight*2/3){
area.scrollTop = 0;
}
}
}
}
function start(){
time = setInterval(scroll,speed);
area.scrollTop++;
}
setTimeout(start,delay);
}
</script>
</body>
</html>
原理：
取出要顯示文字的部分（這里暫且稱其為a部分），復制一份a部分本身連接在a部分后面，形成重復一次的效果（這里暫且稱之為aa部分）；隨着aa部分漸漸向上滾動，當aa部分滾動的高度與原本a部分的高度一樣的時候，將aa部分迅速挪到最初始的位置，即可實現循環滾動的效果；
想要顯示多條數據，只需要改動out樣式的“height: 42px”部分即可；
————————————————
版權聲明：本文為CSDN博主「fairydeng」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/fairydeng/article/details/83274262