javascript位置相关知识点整理

1、css指定元素的位置采用的是文档坐标；

2、js查询元素位置的方法返回的是元素在视口中的位置，即视口坐标；

如何获得元素的位置和尺寸

获得元素的位置和尺寸可以通过getBoundingClientRect()，该方法返回的是视口坐标（值包含边框和内边距，不含外边距）；

Element.getBoundingClientRect()不支持老式浏览器，可以用offsetWidth，offsetHeight，offsetLeft，offsetTop，clientWidth，clientHeight，clientLeft，clientTop，scrollWidth，scrollHeight，scrollLeft，scrollTop（这些都是Element对象，scrollTo是window对象）

offsetWidth，offsetHeight返回值包含内容和内边距和边框，不包含外边距

clientWidth，clientHeight返回值包含内容和内边距，不包含边框和外边距；对于内联元素这两个值总是0

scrollWidth，scrollHeight返回值包含内容和内边距以及溢出的部分，不包含边框和外边距，当无溢出时和clientWidth，clientHeight相等

offsetLeft，offsetTop对于大部分元素都是文档坐标，但对于已定位的元素的后代元素和一起其他元素（表格）返回的是相对于祖先元素的坐标

clientLeft，clientTop基本不用

scrollLeft，scrollTop指定滚动条滚动到指定的位置

 

如何获取滚动条位置：

可以通过（pageXOffset，pageYOffset，ScrollX，ScrollY：window对象），（scrollLeft，scrollTop：Element对象），来获得滚动条的位置

window.pageXOffset，window.pageYOffset

window.ScrollX，window.ScrollY

正常模式下：

document.documentElement.scrollLeft，document.documentElement.scrollTop

怪异模式下：

document.body.scrollLeft，document.body.scrollTop（360极速模式就是怪异模式）

 

如何让滚动条滚动到指定位置：

window.scrollTo();参数为x和y方向上的位置，指定数值多少就跳转到多少

window.scrollBy();参数为x和y方向上的相对值，在原有基础上增加