<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="position: relative; 210px; height: 210px; margin:auto; overflow: hidden; border: 1px solid #ccc">
<div id="notice" style="position: absolute;">
<p>通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</p>
<p>通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知</p>
<p>结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束结束</p>
</div>
</div>
<script>
var wrapdiv = document.getElementById("notice");
console.log(wrapdiv.offsetHeight)
wrapdiv.innerHTML = wrapdiv.innerHTML + wrapdiv.innerHTML;
console.log(wrapdiv.offsetHeight)
function scrollNotice() {
if (wrapdiv.offsetTop <= -wrapdiv.offsetHeight / 2) {
console.log(wrapdiv.offsetTop)
wrapdiv.style.top = '-1px';
return;
}
wrapdiv.style.top = wrapdiv.offsetTop-1+ 'px';
}
setInterval(scrollNotice, 50);
</script>
</body>
</html>
在这段程序中间用到了offsetTop和offsetHeight这两个属性，与之相关也容易混淆的还有scrollTop和scrollHeight,下边我对这四个属性进行详细的解释：（摘自http://www.cnblogs.com/devcjq/articles/3774071.html）
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
scrollTop 是“卷”起来的高度值，示例：
<div style="100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollHeight 与 offsetHeight
offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值？？？)。
<div id="container" style="background-color:silver; 100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>
<script>
alert(document.getElementById("container").offsetHeight);
alert(document.getElementById("container").scrollHeight);
</script>
将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为 250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值为 100+150=250。