scrollTop和scrollLeft属性

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

 

posted @ 2017-05-18 11:15  guodaxia  阅读(257)  评论(0)  编辑  收藏  举报