外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。
scrollLeft也是这样。
<html>
<head>
<title>test scrollTop</title>
<style type="text/css">
#out{
width:300px;
height:200px;
background-color:yellow;
overflow:auto;
}
#in{
width:400;
height:300;
background-color:red;
overflow:auto;
}
</style>
<script type="text/javascript">
function scollT(){
var scrollTopSize = document.getElementById("out").scrollTop;
var scrollLeftSize = document.getElementById("out").scrollLeft;
console.log("scrollTop:" + scrollTopSize + ",scrollLeft:" + scrollLeftSize);
}
</script>
</head>
<body>
<div id="out" onscroll="scollT()">
<div id="in">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
<tr>
<td>1<td>
<td>2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
来源：http://www.cnblogs.com/aigeileshei/p/6872370.html