外层元素的高度值是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>