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

scrollTop和scrollLeft属性的更多相关文章

  1. offsetTop、clientTop、scrollTop、offsetTop属性

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...

  3. scrollTop和scrollLeft的兼容解决万全方法

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  4. chrome浏览器和其它浏览器对scrollTop、scrollLeft的获取方法

    chrome浏览器不能通过document.documentElement.scrollTop来获得距上滚动距离,得到的值始终为0:需要用document.body.scrollTop来获取.其它浏览 ...

  5. jquery scrollTop()与scrollLeft()

    1.scrollLeft() scrollLeft() 方法设置或返回被选元素的水平滚动条位置. 提示:当滚动条位于最左侧时,位置是 0. 当用于返回位置时:该方法返回第一个匹配元素的滚动条的水平位置 ...

  6. 兼容获取scrollTop和scrollLeft(被滚动条卷走的部分)

    function scroll() { //ie9+ 标准浏览器 if (window.pageYOffset != null) { return { left: window.pageXOffset ...

  7. scrollLeft属性设置无效的一个记录

    首先应该明确scrollLeft这个属性,只有当div中的内容长度大于当前div的长度是才能working,根据这个我我找到了一个很神奇的地方,而且我注意到这个${}连注释里面都能替换过来! 以下是正 ...

  8. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  9. JavaScript高级程序设计45.pdf

    客户区坐标位置 clientX和clientY保存着鼠标指针在视口中的水平位置坐标和垂直位置坐标(显示出页面的部分叫做客户区,坐标信息不包括页面的滚动距离) var div=document.getE ...

随机推荐

  1. uchome 全局变量

    $_SC: Array ( [dbhost] => localhost [dbuser] => root [dbpw] => root [dbcharset] => utf8 ...

  2. Spring、springmvc配置

    首先把三个文件copy到resources目录下: 然后把这两个文件copy到WEB-INF下: 在datasource.properties中增加: db.driverLocation=C:\\Us ...

  3. 【Python】自动化测试框架-共通方法汇总

    1.滚动滚动条(有的时候页面元素element取得对但是并没有回显正确的数据,可能是因为页面第一次加载很慢,所以页面可能做了滚动到哪里就加载到哪里的效果,此刻我们就需要用到滚动条自动滚动这段代码让页面 ...

  4. php计算中英文混合或中文字符串的字数

    转载来源链接: http://blog.csdn.net/hueise_h/article/details/22920937 php的strlen和mb_strlen用于统计字符个数.中英文混合的字符 ...

  5. C语言中exit函数的使用

      exit() 结束当前进程/当前程序/,在整个程序中,只要调用 exit ,就结束 return() 是当前函数返回,当然如果是在主函数main, 自然也就结束当前进程了,如果不是,那就是退回上一 ...

  6. NodeJS学习笔记二

    类声明和类表达式 ES6 中的类实际上就是个函数,而且正如函数的定义方式有函数声明和函数表达式两种一样,类的定义方式也有两种,分别是:类声明.类表达式. 类声明 类声明是定义类的一种方式,就像下面这样 ...

  7. 算法第四版 在Linux 中调用Algs4库

    一: 搭建Java 环境   : 确认版本: 1.8及以上 [username:~/] javac -version javac 1.8.0_111 [username:~/] java -versi ...

  8. windows 系统相关配置

    1. 外接显示器分辨率调节:连接上外接下显示器,在本机空白处,右键,分辨率.然后选择显示器,设置显示相关配置. 详见:http://zhidao.baidu.com/question/13494806 ...

  9. SharedObject对象聊天室

    本博推荐文章快速导航: Sql Server2005 Transact-SQL 新兵器学习MCAD学习 代码阅读总结 ASP.NET状态管理 DB(数据库)WAPWinFormFlex,Fms aie ...

  10. Mysql索引结构与索引原理

    Mysql索引主要包括四种,Btree索引.Hash索引.full-text全文索引.R-tree索引,因为作为一名PHP开发者,并不是专业的DBA,在这里只需要了解第一种开发相关的BTree索引. ...