JavaScript中的坐标

Posted 2020-12-26 CodingSherlock

基本概念

视口坐标：相对于浏览器左上角或相对于框架页<iframe>元素的坐标，不包括浏览器的“外壳”。

文档坐标：相对于文档左上角的坐标

除IE8及更早的版本，Window对象的pageXOffset和pageYOffset属性在所有的浏览器中提供滚动条的位置。

IE和其他浏览器可以通过scrollLeft和scrollTop属性来获得滚动条的位置。标准模式下，通过document.documentElement来获取这些属性，怪异模式下，通过document.body来获取这些属性

Example:

//获取滚动条偏移量
function getScrollOffsets(w){
    w=w||window;
　　 var d=w.document;
    if(w.pageXOffset!=null){
        return {
            x:w.pageXOffset,
            y:w.pageYOffset
        };
    }
    if(document.compatMode=="CSS1Compat"){
        return{
            x:d.documentElement.scrollLeft,
            y:d.documentElement.scrollTop
        };
    }
    return {
        x:d.body.scrollLeft,
        y:d.body.scrollTop
    };
}

查询元素的几何尺寸

getBoundingClientRect方法，返回一个有left.right,top,bottom属性的对象，left,top表示元素左上角的坐标，right，bottom表示元素右下角的坐标，返回元素在视口坐标的位置，返回的坐标包含元素的边框和内边距，不包含外边距，非实时的，在用户滚动或改变浏览器窗口大小时不会更新它们。

html元素的offsetLeft和offsetTop属性也能返回元素的X和Y坐标（若该元素是已定位的子元素，则它返回相对于父元素的坐标，可通过offsetParent来获取它的父元素）,offsetWidth和offsetHeight返回它的屏幕尺寸。

Document对象的的elementFromPoint方法返回指定位置的一个元素，传递x坐标和y坐标

滚动

Window对象的scrollTop()方法，接受一个点的X和Y坐标，并作为滚动条偏移量来设置他们

scrollby()和scroll()和scrollTo()类似，但是它的参数是相对的

可通过getBoundingClientRect计算元素位置，并转换为文档坐标，再调用scrollTo()移动到元素所在的位置。但有更简单的办法，scrollIntoView()，默认参数为true,放在视口的上边缘处，设置为false时，放在视口的下边缘处