在平时开发过程中,有很多时候是需要获取屏幕的高度和滚动条的位置信息。在这个做个记录

获取滚动条位置

  • 页面具有 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)