js获取页面位置和高度
/在平时开发过程中，有很多时候是需要获取屏幕的高度和滚动条的位置信息。在这个做个记录
获取滚动条位置
- 页面具有 DTD（或者说指定了 DOCTYPE）时，需要使用 document.documentElement。
- 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，需要使用 document.body。
- 在 IE 和 Firefox 中均是如此。
- 为了兼容（不管有没有 DTD），可以使用如下代码：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
获取屏幕高度
- 网页可见区域宽：
document.body.clientWidth - 网页可见区域高：
document.body.clientHeight - 网页可见区域宽(包括边线的宽)：
document.body.offsetWidth - 网页可见区域高(包括边线的高)：
document.body.offsetHeight - 网页正文全文宽：
document.body.scrollWidth - 网页正文全文高：
document.body.scrollHeight - 网页被卷去的高(滚动条的位置)：
document.body.scrollTop - 网页被卷去的左(滚动条的位置)：
document.body.scrollLeft - 网页正文部分上：
window.screenTop - 网页正文部分左：
window.screenLeft - 屏幕分辨率的高：
window.screen.height - 屏幕分辨率的宽：
window.screen.width - 屏幕可用工作区高度：
window.screen.availHeight - 屏幕可用工作区宽度：
window.screen.availWidth
window.innerHeight
document.documentElement.clientHeight
获取位置
1、getBoundingClientReact()
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
var div = document.getElementById('child');
var reactObj = div.getBoundingClientRect();
console.log(reactObj.left);
console.log(reactObj.top);
2、offset & 遍历
offsetLeft指的是元素相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。
借用这个思路，当我们想获取元素的绝对位置时，可以递归遍历，直到元素的父元素为body为止。
function CPos(x, y) {
this.x = x;
this.y = y;
}
function GetObjPos(ATarget) {
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
// 当元素为body时，其parent为null
while (target) {
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent;
}
return pos;
}
var div = document.getElementById('child');
console.log(GetObjPos(div)['x']); //x坐标
console.log(GetObjPos(div)['y']); //y坐标
关于offsetParent属性，有以下几点Tips。
定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素；
元素自身有fixed定位，offsetParent的结果为null
当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null；
元素自身无fixed定位，且父元素都没有经过定位，则offsetParent为body；
元素自身为无fixed定位，且父元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素；
body的parentNode是null。
参考深入理解定位父级offsetParent及偏移大小
3、兼容
function getElementPos(elementId){
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementByIdx_x(elementId);
if (el.parentNode === null || el.style.display == 'none') {
return false;
}
var parent = null;
var pos = [];
var box;
if (el.getBoundingClientRect) {// IE
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {
x: box.left + scrollLeft,
y: box.top + scrollTop
};
} else if (document.getBoxObjectFor) {
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;
var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;
pos = [box.x - borderLeft, box.y - borderTop];
} else {// safari & opera
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode) {
parent = el.parentNode;
} else {
parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) {
parent = parent.parentNode;
} else {
parent = null;
}
}
return {
x: pos[0],
y: pos[1]
};
}
var xd = getElementPos("child");
console.log(xd.x);
console.log(xd.y);
移动
将页面滚动到位置（100，500）：window.scrollTo(100,500)
全文完。