scrollHeight,scrollLeft,scrollTop,scrollWidth,offsetHeight,offsetLeft,offsetTop,event.clientX,event.clientY

转载 2007年10月13日 09:37:00
 

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量



以上主要指IE之中,FireFox差异如下:

FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE6.0、IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height 

需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关


关于offsetTop与offsetHeight的区别以及使用方法

offsetTop和offsetHeight是设置一个元素的位置和获取圆度大小经常会使用的参数,下面具体讲一下他们的区别于联系: 例如obj为html的一个元素对象, obj.offsetTop指...
  • Doulvme
  • Doulvme
  • 2017年07月10日 16:07
  • 414

js中关于scrolltop.offsettop等距离用法的介绍

页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse...
  • jian_xi
  • jian_xi
  • 2016年12月01日 21:32
  • 1226

让你彻底搞懂offset

很多初学者对于JavaScript中的offset、scroll、client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确。 ...
  • u012028371
  • u012028371
  • 2016年10月31日 18:27
  • 689

详解JS位置、宽高属性之一:offset系列

很多初学者对于JavaScript中的offset、scroll、client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确。 图一   ...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:59
  • 11744

offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间

offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间。 今天花点功夫,彻底把他们搞清楚了。 假设 obj 为某个...
  • crisis111
  • crisis111
  • 2015年04月26日 23:28
  • 246

关于scrollTop和scrollHeight那点事儿(调研)

1、scrollTop (1)设置scrollTop          FF、IE8        使用document.documentElement.scrollTop = 100;    ...
  • zerojunyan
  • zerojunyan
  • 2013年04月26日 13:00
  • 426

scrollLeft,scrollTop,滚动代码的总结

scrollLeft,scrollTop,滚动代码的总结 今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      ...
  • xiqim
  • xiqim
  • 2016年09月29日 14:23
  • 216

scrollLeft,scrollTop,滚动代码的总结

今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      {           document.getElement...
  • zerojunyan
  • zerojunyan
  • 2013年06月05日 21:03
  • 199

微信浏览器scrollTop问题

功能描述:最近要在微信上面做一个接入环信的聊天功能, 要把新收到的消息把原来的消息往上顶,因此要设置滚动条总是在最下面,因此要用到scrollTop 1、聊天消息列表: ...
  • curiouslearnerdhh
  • curiouslearnerdhh
  • 2016年07月22日 11:12
  • 3432

scrollLeft,scrollTop,滚动代码的总结

scrollLeft,scrollTop,滚动代码的总结 今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      ...
  • yongbuyanqi88888
  • yongbuyanqi88888
  • 2014年09月17日 11:15
  • 355
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:scrollHeight,scrollLeft,scrollTop,scrollWidth,offsetHeight,offsetLeft,offsetTop,event.clientX,event.clientY
举报原因:
原因补充:

(最多只允许输入30个字)