知识点
1.scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 2.scrollTop 滚动条滚动距离 3.clientHeight 窗口可视范围高度
实现文字上下滚动原理
需要一个充当电视机效果的盒子（父亲）在父亲盒子里放一个用来做滚动效果的盒子一个空盒子，这个空盒子起到的作用是让滚动内容一致重复滚动下去（它的高度=滚动盒子的高度）父亲盒子的高度=滚动盒子的高度父亲盒子需要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
);
}
