JavaScript——DOM位置属性
Event对象属性：
clientX相对浏览器窗口的x坐标位置
offsetX设置或者是得到鼠标相对于事件目标的父元素的内边界在x坐标上的位置。（FF不支持）
screenX相对于用户屏幕。
例：
Document
滚动对象属性
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；
例：
Document
...........<--超出页面的内容，出现滚动条测试-->
- 我是000DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD50
触法事件位置
window.screenX/screenY 获取到浏览器到屏幕左边/上边的距离 X，Y单位px，Y只有正直；X 可为负值
浏览器的坐标轴起点，浏览器最上角；（0,0）
事件对象：
clientX/Y求触发事件的位置坐标，以视图窗口为准，原点位置在 视图窗口的左上角 X 表示距离距离窗口左边的距 离；Y表示距离窗口顶部的距离
offsetX/Y , 触发事件位置；X ,Y子元素距离元素左边的距离；顶部的距离 与父元素是否有位置属性没有关系。坐标轴原点在父元素左上角
Document
元素位置
Document
查看元素属性
offsetWidth/offsetHeight 查看元素的视觉尺寸 (width+height+padding)没有margin ;注意IE盒子模型不同点
omEl.getBoundingClientRect()
兼容性好，该方法返回一个对象，对象里面有left.top。等属性.left表示元素左上角X坐标；top表示左上角Y坐标，right和bottom 表示右下角X和Y 坐标
X坐标表示：点距离视图窗口左边的距离。Y坐标 表示距离视图出口顶部的距离
height width 老版本IE 并未实现
Document
求滚动条位置
滚动条滚定距离：scrollTop/scrollLeft 距离窗口顶部/左边距离
document.documentElement.scrollHight/scrollWidth 获取滚动条高度
document.body.scrollheight/scrollWidht IE 8以下兼容
求出滚动条滚动的最大距离 = document.documentElement.scrollHight/scrollWidtd —减去 innerHeight/innerWidth - 默认滚动条宽度
如果有滚动条documen.documentElement.clientHeight/clientWidht = innerHeight/innerWidth - 滚动条的大小（默认滚动条的宽度是17px）
查看元素滚动的距离
注意获取滚动条的高度；
如果横向的滚动条出现了。
document.documentElement+滚动条滚动最大距离 = document.documentElemment.scrollHeight
让滚动条滚起来
滚动条滚动
1: window.scroll(x,y)
(1)适用于任何一个具有滚动条的元素
(2) 没有没加；
2:domEL.scrollto(x,y)
(1)使用场景；只有domcumentElemtn 上有滚动条时候才能用
(2) 定位功能；在滚动条为0的位置开始滚动；作用：想让滚动条滚到哪里；就到哪里。没有累加滚动的过程
3: domEL.scrollBy)(x,y)
(1)在滚动条当前的位置进行滚动的；有累加滚动的过程
domeEl表示元素对象
那个元素对象具有滚动条；X Y 就在那个元素的左上角
例如：
var box = document.getElementsByClassName('box')[0]
box.scrollTo(0,200)
窗口属性汇总：
1.document.documentElement表示html，我在下面就用html简写替代
滚动条是挂载在document下的，所以其与html元素是同级的，不算在html中
2.window.innerWidth,innerHeight与window.outerWidth,outerHeight
经测试，在Chrome中，outer的两个属性就是浏览器窗口的宽高，而inner的两个属性是浏览器的视图区域
注意一下：如果有滚动条的话，滚动条的宽高也算在inner的两个属性内
3.html与body的区别，在于html就是在页面视图容器中的整个页面，但是body是页面的内容区域，一般来说，浏览器中的body会有默认样式，设置外边距为8px，但是清除了该样式之后，html就与body一样大了
html.scrollHeight与body.scrollHeight就是指的是html与body的可以滚动的高度，就是总高度
html.clientHeight与body.clientHeight：就不同了，html的这个属性其实就是视口高度innerHeight（去掉横滚动条的高度），但是body不同，它的这个属性其实与滚动高度scrollHeight相同
4.html.scrollWidth,body.scrollWidth
html.clientWidth,body.clientWidth
滚动宽度就是html与body的可以横向滚动的宽度 而可见宽度就是横向滚动条未滚动时的html与body的可见宽度
5.滚动条位置
可以通过三种方法取得：
document.documentElement.scrollLeft,scrollTop（通过将其设置为0，可以回到顶部，下面的两个属性不行）
window.pageXOffset,pageYOffset
window.scrollX,scrollY
目前来说，这三者没什么区别 至于通过body对象下的scrollLeft，scrollTop访问滚动条位置是IE浏览器的方法，在Chrome中这两者始终是0
元素内的滚动条
可见区域和滚动区域就很简单了，没有浏览器默认的滚动条那么复杂了
可以通过调用方法直接滚动