scrollTop和scrollLeft属性
外层元素的高度值是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属性的更多相关文章
- offsetTop、clientTop、scrollTop、offsetTop属性
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...
- scrollTop和scrollLeft的兼容解决万全方法
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- chrome浏览器和其它浏览器对scrollTop、scrollLeft的获取方法
chrome浏览器不能通过document.documentElement.scrollTop来获得距上滚动距离,得到的值始终为0:需要用document.body.scrollTop来获取.其它浏览 ...
- jquery scrollTop()与scrollLeft()
1.scrollLeft() scrollLeft() 方法设置或返回被选元素的水平滚动条位置. 提示:当滚动条位于最左侧时,位置是 0. 当用于返回位置时:该方法返回第一个匹配元素的滚动条的水平位置 ...
- 兼容获取scrollTop和scrollLeft(被滚动条卷走的部分)
function scroll() { //ie9+ 标准浏览器 if (window.pageYOffset != null) { return { left: window.pageXOffset ...
- scrollLeft属性设置无效的一个记录
首先应该明确scrollLeft这个属性,只有当div中的内容长度大于当前div的长度是才能working,根据这个我我找到了一个很神奇的地方,而且我注意到这个${}连注释里面都能替换过来! 以下是正 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- JavaScript高级程序设计45.pdf
客户区坐标位置 clientX和clientY保存着鼠标指针在视口中的水平位置坐标和垂直位置坐标(显示出页面的部分叫做客户区,坐标信息不包括页面的滚动距离) var div=document.getE ...
随机推荐
- 监听checkbox事件
<!DOCTYPE html> <html> <head> <title></title> </head> <script ...
- 测试命令运行时间：timeit和profile
先说timeit from timeit import Timer def test1(): n=0 for i in range(101): n+=i return n def test2(): r ...
- Linux(CentOS)系统下搭建svn服务器
由于GitHub的私有项目需要收费,gitlab对服务器的要求必须是4GB内存以上.对于一些个人的小型项目,想要免费的版本控制工具来管理自己的代码,又不想代码公开,无疑SVN是比较好的选择.windo ...
- django-生成随机验证码
Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1 1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...
- cocos进阶教程(5)CC_CALLBACK_X系列的使用技巧
CC_CALLBACK_1,CC_CALLBACK_2,CC_CALLBACK_3 这些都是std::bind的宏,数字1,2,3主要表示要占位的数量,也是将来传递参数的数量. // new call ...
- 牛客国庆集训派对Day2 Solution
A 矩阵乘法 思路: 1° 牛客机器太快了,暴力能过. #include <bits/stdc++.h> using namespace std; #define N 5000 in ...
- HIVE: 自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG？)
我们的输入文件 hello0, 内容如下: xiaowang 28 shanghai@_@zhangsan 38 beijing@_@someone 100 unknown 逻辑上有3条记录, 它们以 ...
- Databases Questions & Answers
Databases Questions & Answers 1. What are two methods of retrieving SQL? 2. What curso ...
- IIS应用程序池自动停止，报503错误解决方法
前两天遇见一个问题,部署网站之后,浏览时总是报503,找了半天才发现是用户权限问题,现在记录一下,方便以后遇到的大伙快速解决问题,以至于不会浪费太多时间 解决方法: 应 用程序-特定 权限设置未将 C ...
- mysql 触发器 trigger用法 one （简单的）
实例~~ example1: 创建表tab1 1 2 3 4 DROP TABLE IF EXISTS tab1; CREATE TABLE tab1( tab1_id varchar(11) ...