获取元素相对于页面的位置 和 页面高度 和 页面滚动高度

获取元素相对于页面的位置

参考：

http://apply-templates.com/en/blog?title=Finding%20element%20position%20in%20Javascript

http://www.quirksmode.org/js/findpos.html

http://www.codeproject.com/KB/scripting/dom-element-abs-pos.aspx

// 获取元素相对于页面文档的位置----------------------------------------------
function getElementPos(el) {
	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{ 
		pos = [el.offsetLeft, el.offsetTop]; 
		parent = el.offsetParent;    
		if (parent != el) {
			while (parent) { 
				pos[0] += parent.offsetLeft;
				pos[1] += parent.offsetTop;
				parent = parent.offsetParent;
			} 
		}  
	}  
	return {x:pos[0], y:pos[1]};
}	

获取页面滚动大小高度 和 获取页面高度
get the page height and the scroll amounts

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}

转载于:https://www.cnblogs.com/zsk526/archive/2011/09/21/2184307.html