知识点
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);
}