js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍


Posted in Javascript onMay 16, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js位子表示</title> 
<script type="text/javascript"> 
function testClick(oDiv){ 
var oDivId=document.getElementById(oDiv); 
alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop 
+"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " ); 
} 
</script> 
</head> 
<body style="margin:0; padding:0;"> 
<div style="width:300px; height:300px; padding:2px; margin:3px;"> 
<div id="t1" style="margin:1px; padding:4px ; border:3px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" > 
一般的通过mousedown、mousemove、mouseup等打造的拖动,仅仅在普通的键盘+鼠标的电脑设备上可以工作。而到了ios设备上(iphone itouch ipad),则不能工作了。最近因为做个东西,需要支持ios设备,所以只好看了下webkit浏览器的触摸事件。 
其实也很简单,对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo,花了不少的时间,所以为了节省时间,我文章里就不多说了,仅贴一下相关代码。 
</div> 
</div> 
</body> 
</html>

ie(ie9,chrome,ff基本一致)中:
offsetHeight(返回元素的高度和宽度,以像素为单位,包含内边距):
200+4+4+3+3=214(自身200的高度+上下各为4的内边距+上下的各为3的border,注意不包括外边距)
offsetWidth(返回元素的高度和宽度,以像素为单位,包含内边距):、
100+3+3+4+4=114 同上
offsetLeft(返回当前元素的左边界到它的包含元素的左边界的偏移量,以像素为单位):
2+3+1=6(ie6下为3)(父级div的内左边距2+父级div外左边距+3+子div左外边距+1,注意这里子div内边距是不会影响到offsetLeft)
没有offsetRight的概念。
offsetTop(返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。)
2+3+1=6(ie6下为2)道理和offsetLeft一样
scrollHeight(返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow:scroll 属性,如果为hidden,得到的只是能显示文字所能看到的高度)
474(div的实际的高度,由里面的文字来决定,overflow:scroll )
如果overflow:hidden,就只有390,其它的被隐藏了
如果去调overflow,就是390,为什么 overflow:scroll 却等于474呢?因为还包含了滚动条的高度
scrollWidth:(和scrollheight道理一样)
overflow:hidden值为108(子div实际的宽度)
overflow:scroll 值为90(这里为什么会这样?难道不包括滚动条的宽度?)
去掉overflow,值为108
scrolltop(返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量)
如果不拖动滚动条,默认的值为0;
scrollLeft同上
Javascript 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
JQuery选择器特辑 详细小结
May 14 #Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 #Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 #Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 #Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 #Javascript
You might like
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JavaScript 的继承
2011/10/01 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
Json解析的方法小结
2016/06/22 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python扩展内置类型详解
2018/03/26 Python
Python异常处理例题整理
2019/07/07 Python
python实现最短路径的实例方法
2020/07/19 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
德语专业求职信
2014/03/12 职场文书
股份合作协议书
2014/04/12 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
新店开张宣传语
2015/07/13 职场文书
研讨会致辞
2015/07/31 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python