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

代码如下:

<!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同上

赞 (0)

相关推荐

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • 关于scrollLeft,scrollTop的浏览器兼容性测试

    今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用 document.documentElement.scrollTop这个,但在chrome下这个值为0. 在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • javascript支持firefox,ie7页面布局拖拽效果代码

    javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]

    关于js拖拽上传 [一个拖拽上传修改头像的流程]

    如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    复制代码 代码如下: <!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> <title>jQuery的位置

  • JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

    限制范围的拖拽,要求被拖拽的对象必须在客户区可见范围! div是body的子元素,div的left/top是针对body的,不是针对可见客户区的,所以在拖拽的过程中不得不考虑被卷走的部分,因为网页文档可能很大,无论宽度还是高度都可能大于客户区,等于客户区大小就很好处理,大于的话就得考虑scrollTop和scrollLeft,否则div会跟鼠标脱离,因为距离都算错了. /*切记:凡是clientX/Y 的 一定记得卷走的部分*/ document.body是DOM中Document对象里的bod

随机推荐