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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
实现一个简单得数据响应系统
Nov 11 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
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php实现源代码加密的方法
2015/07/11 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python学习pygal绘制线图代码分享
2017/12/09 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Django实现文件上传下载
2019/10/06 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
浪漫婚礼主持词
2014/03/14 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2014教师研修学习体会
2014/07/08 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
历史博物馆观后感
2015/06/05 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL