外层元素的高度值是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. IIS7.5站点配置

    1. 创建站点映射目录: c:\website\release 2. 创建系统用户: a.本地用户和组-->用户-->新用户-->用户名\密码:WebUSR.xxxyyy--> ...

  2. mysql 大表优化

    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 转自:https://segmentfault.com/a/1190000006158186 单表优化 除非单表数据未 ...

  3. git-【三】理解工作区与暂存区的区别

    基本概念 工作区:就是你在电脑上看到的目录,比如目录下testgit里的文件(.git隐藏目录版本库除外).或者以后需要再新建的目录文件等等都属于工作区范畴.       版本库(Repository ...

  4. 什么是API测试

    什么是API API是Application Programming Interface的简写. 实现了两个或多个独立系统或模块间的通信和数据交换能力. 什么是API测试 图片.png API测试是不 ...

  5. 如何有规律的备份 WordPress 博客（转）

    转自:http://blog.wpjam.com/m/backup-your-blog-regularly/   我们都知道备份 WordPress 博客应该是规律性的操作,但是事实上往往我们都会因为 ...

  6. Git: A分支上的commit提交到B分支上

    1. 执行git log -3 --graph A,查看A分支下的commit: 注:commit 后面的hash值代表某个commit,这里把”82f1fb7138c5860cc775b4b5ea7 ...

  7. Ubuntu下dlib库编译安装

    安装libboost 按照dlib的说明安装始终不成功,参考machine learning is fun作者的指导installing_dlib_on_macos_for_python.md,需要首 ...

  8. # 20145118 《Java程序设计》第4周学习总结 ## 教材学习内容总结

    20145118 <Java程序设计>第4周学习总结 教材学习内容总结 本周内容为教材第六.七两张内容. 重点概念: 1.面向对象中,子类继承父类,避免重复的行为定义,是一种简化操作. 2 ...

  9. shell脚本监控Linux系统性能指标

    2016-11-04 22:41 原作者不详 分类: Linux(7) 在服务器运维过程中,经常需要对服务器的各种资源进行监控, 例如:CPU的负载监控,磁盘的使用率监控,进程数目监控等等,以在系统出 ...

  10. 理解if __name__ == '__main__':

    一开始没怎么注意这个语句,这两天在模拟知乎登陆时准备刨根问底了,先看两行代码片段 第一个例子:这是在login.py文件的一部分,其他我们忽略,只关注print()函数的内容 import time ...