外层元素的高度值是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. 产品开发过程描述xmind

  2. java 多线程 day18 ThreadPoolExecutor

    http://blog.csdn.net/lipc_/article/details/52025993 https://www.cnblogs.com/trust-freedom/p/6681948. ...

  3. Django之Rest Framework框架

    一.什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度 ...

  4. 在windows下MySQL-python的安装

    安装MySQL-python下载文件PyMySQL-0.7.11.tar.gz 解压到任意目录 https://pypi.python.org/pypi/PyMySQL 然后在cmd命令行行下进行安装 ...

  5. Thread的六中状态

    线程共有6种状态:在某一时刻只能是这6种状态之一.这些状态由Thread.State这个枚举类型表示,并且可以通过getState()方法获得当前线程具体的状态类型. NEW:至今尚未启动的线程的状态 ...

  6. Java基础教程：注解

    Java基础教程:注解 本篇文章参考的相关资料链接: 维基百科:https://zh.wikipedia.org/wiki/Java%E6%B3%A8%E8%A7%A3 注解基础与高级应用:http: ...

  7. 2016-ccf-data-mining-competition 搜狗用户画像构建

    想法1:   分成147(3*7*7)类, 后来觉得这样效果不好,后来看了看竞赛要求的也是分别预测,分别评分,而不是一次就把3类的标签都给出   所有后来我们改进了当时的想法,决定对年龄,性别,学历进 ...

  8. VS2010/MFC编程入门之七（对话框：为对话框添加控件）

    创建对话框资源需要创建对话框模板.修改对话框属性.为对话框添加各种控件等步骤,前面一讲中鸡啄米已经讲了创建对话框模板和修改对话框属性,本节继续讲如何为对话框添加控件. 上一讲中鸡啄米创建了一个名为“A ...

  9. AISing Programming Contest 2019 Solution

    A - Bulletin Board 签到. #include <bits/stdc++.h> using namespace std; int main() { int n, h, w; ...

  10. hdu5184 数论证明

    这题说的给了一个整数n 和一串的括号, 那么要我们计算 最后有n/2对括号的 方案数有多少. 我们可以先预先判断一些不可能组成正确括号对的情况, 然后我们可以将这个问题转化到二维平面上, 令 m = ...