1.滚动条滚动的距离
window.pageXOffset / pageYOffset (IE9以下不兼容)
document.body.scrollTop / scrollLeft 或 document.documentElement.scrollTop / scrollLeft(注:这两个方法都为IE8以下方法,但互相冲突,IE8以下浏览器或者兼容前者,或者兼容后者,为方便起见,需写一个兼容性的函数)
function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.offsetLeft + document.documentElement.offsetLeft, y: document.body.offsetTop + document.documentElement.offsetTop } } }
2.可视区窗口的尺寸
window.innerWidth / innerHeight (IE9以下不兼容)
document.documentElement.clientWidth / clientHeight (标准模式下任意浏览器兼容)
document.body.clientWidth / clientHeight (怪异模式下浏览器兼容)
以下为兼容性函数
function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { if (document.compatMode === 'Backcompat') { return { w: document.body.clientWidth, h: document.body.clientHeight } } else { return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }
3.查看元素的几何尺寸
dom.offsetWidth / offsetHeight
4.查看元素的位置
dom.offsetLeft / offsetTop (注:对于无定位父级的元素,返回相对文档的坐标,有定位父级的元素,返回相对父级元素的坐标)
dom.getElementPosition (注:任意元素相对于文档的坐标)
未完待续 。。。