scrollheight，scrolltop，offsetheight具体是什么意思，举例说明，别拿文本语言解释，不懂

scrollHeight，scrollTop，offsetHeight

从来没有切定学过js的我，好多知识点都落下了！这几天公司要做一个抽奖模块，要求将中奖用户的一些信息来回滚动显示出来。滚动效果网上还是蛮多的，自己以前也做过类似的效果，但这次做起来还这不是以前那么顺利，不是滚两下停了就是有跳跃的感觉。还是的自己好好‘研究’一下：scrollHeight，scrollTop，offsetHeight这三个鸟东西

先发一个‘道具’放这，为下面的解说做点准备：

第一条

第二条

第三条

第四条

// 

var test = document.getElementById('test');

var inner1 = document.getElementById('inner1');

var inner2 = document.getElementById('inner2');

inner2.innerHTML = inner1.innerHTML;

//alert(test.offsetHeight);

//alert(test.scrollHeight);

//alert(test.scrollTop);

//alert(inner1.offsetHeight);

//alert(inner1.scrollHeight);

//alert(inner1.scrollTop);

//alert(inner2.offsetHeight);

//alert(inner.scrollHeight);

//alert(inner.scrollTop);

setInterval(add, 70);

function  add(){

if( inner1.offsetHeight-test.scrollTop<=0 ){

//alert(test.scrollTop);

test.scrollTop -= inner1.offsetHeight;

//alert(test.scrollTop);

}else{

test.scrollTop++;

}

}

// ]]>

scrollHeight： 看起来有点像滚动条的高度，其实不然，虽然他确实更滚动条有关系。他是指一个元素在不加任何：height，overflow 这些限制时的高度。比如上面：id=”test”的div，他的scrollHeight是280px，为什么是这个数！？这个可以计算出来的：inner1的高度=35*4px（注：每一行line-height为35px，总共4行，切已经去掉了p标签的内外边框margin padding 的高度），然后又因为js里面有这一句：inner2.innerHTML = inner1.innerHTML;将innner1里面的html标记复制给了innner2，所以inner2现在的高度也是：35*4px，所以也就有test的高度为 280px=inner1+inner2;

offsetHeight： 这个东西就跟滚动条没关系了。他是指一个元素在加：height，时的值。上面的：id=”test”的div，他的offsetHeight是35px，这个没得很多解释，就是一个元素可以看见的高度。

scrollTop：这个是指滚动条到滚动开始地方的高度（见图的解释）。

好像没什么好说的了，这个三个的区别我就发现这些。可能还有其他区别，希望知道的朋友能帮我加上，学习一个分享的过程