js实现文字上下滚动可以控制速度

知识点

1.scrollHeight 文档内容实际高度，包括超出视窗的溢出部分
2.scrollTop 滚动条滚动距离
3.clientHeight 窗口可视范围高度

实现文字上下滚动原理

1. 需要一个充当电视机效果的盒子（父亲）
2. 在父亲盒子里放一个用来做滚动效果的盒子
3. 一个空盒子，这个空盒子起到的作用是让滚动内容一致重复滚动下去（它的高度=滚动盒子的高度）
4. 父亲盒子的高度=滚动盒子的高度
5. 父亲盒子需要css属性over-flow:hidden;

完整代码

css文件代码

.rollingBox{
    text-align: center;
    width: 50%;
    margin: 20px auto;
    padding: 10px;
    height: 700px;    
    overflow: hidden;
    cursor: pointer;
   
}
.rollingBox .scrollingContent{
    margin-top: 20px;
    height: 700px;
}

html文件

<div class="rollingBox" id="scrolldiv">
    <div class="scrollingContent" id="scroll1" >
		滚动内容
	</div>
    <div id="scroll2"  class="scrollingContent"></div>
 </div>

滚动js代码

window.onload = function(){
    roll(40); 
}      
function roll(t) {
    var scroll1 = document.getElementById("scroll1");
    var scroll2 = document.getElementById("scroll2");
    var scrolldiv = document.getElementById("scrolldiv");
    scroll2.innerHTML = scroll1.innerHTML;
    scrolldiv.scrollTop = 0;
    var timer = setInterval(rollStart, t);
    scrolldiv.onmouseover = function () {
        clearInterval(timer)
    }
    scrolldiv.onmouseout = function () {
        timer = setInterval(rollStart, t);
    }
}
function rollStart() {
    if ( document.getElementById("scrolldiv").scrollTop >= document.getElementById("scroll1").scrollHeight) {
        document.getElementById("scrolldiv").scrollTop = 0;
    } else {
        document.getElementById("scrolldiv").scrollTop++;
    }
    console.log( document.getElementById("scroll1").scrollHeight);
}