javascript--文档和元素几何图形滚动

15.8.1文档坐标和视口坐标

元素的位置：向右表示x轴增加，向下表示y轴增加

文档坐标：相对于整个文档，在用户移动滚动条时坐标不改变

视口坐标：相对于窗口

 

获取滚动条位置：

1）window对象的pageXOffset和pageYOffset（除ie8以及以下版本）

2）通过

2.1)在标准模式下document.documentElement的scrollLeft和scrollTop

2.2）在怪异模式下通过docoment.body的scrollLeft和scrollTop

 

查询窗口尺寸

1）window的innerWidth以及innerHeight

2）通过

2.1)在标准模式下document.documentElement的clientWidth和clientHeight

2.2）在怪异模式下通过docoment.body的clientWidth和clientHeight

 

15.8.2查询元素几何尺寸

getBoundingClientRect()不需要任何参数，返回left right top bottom属性对象（left，top即左上角x，y坐标；right，bottom表示右下角x，y坐标）

这个函数返回的坐标包括边框和内边距

getClientRects():返回只读类数组对象

区别：   

例如：一些被断成两行的斜体文本成以上形状

 

内联元素上调用getBoundingClientRect（）时会返回两行宽度

而调用getClientRects会返回每一个矩形对象

 

解释：内联元素（行内元素）与块状元素

内联元素包括：<span><code><b>

块状元素包括：<div>，图片，段落

并且以上两种方法并不会实时更新，如果滚动条改变或者窗口大小改变，其值不会改变，他们只是调用时文档视觉的静态快照（拷贝）

 

15.8.3判定元素在某点

判定是口中指定位置有什么元素，可以使用document.elementFromPoint()

参数：传递x，y坐标返回元素

但只返回最里面最上面的元素（z－index）

如果指定的店在视口以外，返回null转换为文档坐标一样返回null

 

15.8.4滚动

window对象的scrollTop()方法

参数：x，y坐标，可以让浏览器滚动到指定点出现在视口的左上角（即滚动条向上，向左）

如果指定点在太右，太下只能保证尽可能接近

还有scrollBy,scroll,scrollTo

如果想要浏览器滚动到使某个元素可见，可以使用scrollIntoView()方法，

这个方法默认（不穿参数）的情况下：试图将元素接近视口上沿

传递（false）：将元素接近视口下沿

 

15.8.5关于元素尺寸，位置，溢出的更多信息

任何html元素都有只读属性offsetLeft,offsetTop,用来返回x，y轴坐标，但是这些值是文档坐标，但对于已定为元素的后代元素和一些其他元素，这些属性返回的是相对于祖先元素

offsetParent属性指定这些元素所相对的父元素

clientWidth,clientHeight与offsetHeight,offsetWidth的区别：

clientWidth,clientHeight不包含边框大小，只包含内容和内边距，如果在内边距和边框之间加了滚动条，返回值不包含滚动条，通常对于内联元素，这两个属性的值为0

且在文档根元素查询这两个属性时，他们的返回值和窗口的innerWidth，innerHeight 属性值相同

clientTop，clientLeft的值通常等于左边和上边的边框宽度，如果有左边或者上面的滚动条，则包含滚动条的宽度，通常对于内联元素，这两个属性的值为0

 

scrollWidth以及scrollHeight是元素内容区域加上内边距加上任何溢出内容的尺寸，如果没有溢出部分，则等于clientxxx的值

 

最后：scrollLeft和scrollTop是指定滚动条的位置，注意此方法是可写属性，通过设置它们来让元素中的内容滚动

html元素没有scrollTo，只有window对象有