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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
javascript基础知识
2016/06/07 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
浅谈Python NLP入门教程
2017/12/25 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python的命名规则知识点总结
2019/10/04 Python
python设置环境变量的作用整理
2020/02/17 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
物流司机岗位职责
2013/12/28 职场文书
会计系毕业求职信
2014/08/07 职场文书
个人自我剖析材料
2014/09/30 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
签字仪式主持词
2015/07/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
MySQL系列之十一 日志记录
2021/07/02 MySQL
浅析JavaScript中的变量提升
2022/06/01 Javascript