外层元素的高度值是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. 15.Git面试题

    1.git常见命令作用 git init 在哪一目录下,就会在该目录下生成.git目录. 注意:git init命令会把当前目录当作库. git status 查看本地库的状态 git add . 将 ...

  2. 表单（下）-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  3. Flask系列（九）flask-script组件

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  4. 查T结果与Z结果的P值[转载]

    T检验P值表格来自:https://blog.csdn.net/m0_37777649/article/details/74937242 Z检验表格来自:https://wenku.baidu.com ...

  5. Web安全大揭秘

    web安全大揭秘,通常会有那些web安全问题呢? 1,xss 2,sql注入 3,ddos攻击

  6. Could not load file or assembly 'Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, ...

    使用oracle数据库一个多月依赖这问题一直都得不到解决,最近任务不是很忙了,所以决定把这问题解决掉.写一篇文章做记录. 以上错误主要是net程序oracle数据库使用了Microsoft Enter ...

  7. devise 自定义手机号登录

    user model中配置 validates_uniqueness_of :phone def email_required? false end 修改user migration文件,给phone ...

  8. Centos 7 无法上网的解决办法

      首先,鼠标右击桌面,点击“在终端中打开”.   然后如下图所示,输入:su,按回车后输入自己的root密码:注意,输密码的时候密码区域并不显示任何东西哦,自己输错了就多按几次backspace就行 ...

  9. 牛客国庆集训派对Day3 Solution

    A    Knight 留坑. B    Tree 思路:两次树形DP,但是要考虑0没有逆元 可以用前缀后缀做 #include <bits/stdc++.h> using namespa ...

  10. uva1424

    Traveling salesmen of nhn. (the prestigious Korean internet company) report their current location t ...