【脚本化文档】——文档和元素的几何形状和滚动

——文档坐标和视口坐标

• 元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加
• 视口坐标也称为窗口坐标，文档坐标即以document左上角为坐标原点的坐标系
• 判断浏览器窗口滚动条的位置
  
  • window.pageXOffset //滚动条横向偏移位置
  • window.pageXOffset——滚动条横向偏移位置

查询窗口的视口尺寸

// 作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w) {
    w = w || window;  // 使用指定的窗口，若不指定则使用当前窗口
    // 除了IE8及更早的版本外，其他都可用
    if (w.innerWidth != null) return {w: w.innerWidth, h:w.innerHeight};
    var d = w.document;//对于标准模式下的IE
    if (document.compatMode == "CSS1Compat")        
        return { w: d.documentElement.clientWidth,
                 h: d.documentElement.clientHeight };
    // 对于怪异模式下的浏览器
    return { w: d.body.clientWidth, h: d.body.clientWidth };
}

——查询元素的几何尺寸

getBoundingClientRect（） 
//返回元素在**视口坐标**中的位置等信息,视具体浏览器而定

百度一下按钮的例子

document.getElementById("su").getBoundingClientRect();

/*返回
DOMRect { x: 891, y: 182.3000030517578, width: 102, height: 38, top: 182.3000030517578, right: 993, bottom: 220.3000030517578, left: 891 }
*/

left和top属性表示元素左上角的X和Y坐标，
right和bottom属性表示元素右下角的X和Y坐标
这四个属性是各个浏览器都有的。其他的是各个浏览器的拓展

该方法可以得到视口坐标，如果需要得到文档坐标，则需要加上滚动条偏移量

var box = e.getBoundingClientRect();
var x = box.left + window.pageXOffset;
var y = box.top + window.pageYoffset;

——判定某坐标点有的元素

document.elementFormPoint(X,Y)
//返回指定位置的一个元素，注意是一个

返回的是一个节点信息

——滚动

• window.scroll(X,Y)——文档滚动到指定点出现在视口的左上角，X和Y为文档坐标
• window.scrollTo(X,Y)——文档滚动到指定点出现在视口的左上角，X和Y为文档坐标
• window.scrollBy(X,Y)——文档相对现在的位置滚动多少，是在当前滚动条的偏移量上面增加

---

点击这里下载思维导图——思维导图文件下载