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

    1.代码提示不区分大小写 2.自动导入 抽取成接口-push members up 你可能不知道的IDEA使用技巧

  2. LoadRunner-常用的函数

    LoadRunner中,常用的函数有很多,这里只介绍编写性能测试脚本过程中那些必然用到的函数.本文重点关注这些典型函数的应用场合及注意点,至于函数详细使用说明请参见LoadRunner帮助文档. 1. ...

  3. 很靠谱linux常用命令

    vim是打开vim编辑器,别的编辑器还有vi(功能没有vim 强大),nano,emacs等等,感觉还是vim最强大,其次是vi,别的就要差一些了. 我听我们老师说,用图形界面本身已经会被高手笑了,如 ...

  4. JS操作符转化数字

    在Node.js源代码里,随处可见使用各种符号处理字符串为数字的.可能由于不同人编写,使用的风格也各有不同. 基本上有下面几种. 将字符串转化为数字 + 将一个数字的字符串转化为数字很简单的一种做法就 ...

  5. python 面向对象高级应用（三）

    目录: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__getattr__ 二次加工标准类型(包装) __ ...

  6. RMAN备份保留策略

    RMAN备份保留策略 定义备份保留策略有以下两种方式: 1.使用CONFIGURE RETENTION POLICY TO RECOVERY WINDOW命令. 例如:RMAN>CONFIGUR ...

  7. 数据挖掘-KNN-K最近邻算法

    1. 算法核心思想: 通过计算每个训练样本到待分类样本的距离,选取和待分类样本的距离最近的 K 个训练样本,K个样本中那个类别的训练样本占据着多数, 则表明待分类的样本就属于哪一个类别. KNN算法在 ...

  8. cocos-lua基础学习（九）spite类学习笔记

    创建精灵 ,) ) layer:addChild( sprite ) ) layer:addChild(BatchNode, , kTagSpriteBatchNode) ,) ) layer:add ...

  9. jquery实现ajax跨域请求

    1.跨域问题: 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 如: 项目一:p1.html <body> ...

  10. stm32 Flash读写[库函数]

    stm32 的内置可编程Flash在许多场合具有十分重要的意义.如其支持ICP特性使得开发人员对stm32可以警醒调试开发,可以通过JTAG和SWD接口对stm32进行程序烧写:支持IAP特性使得开发 ...