文档的几何形状和滚动

Posted 2020-10-09 BluesQian

一：文档坐标和视口坐标

　　在顶级窗口和标签页中，“视口”只是实际显示文档内容的浏览器的一部分：它不包括浏览器的“外壳（如菜单，工具条和标签页）。针对框架页中显示的文档，视口只是定义了框架页的《iframe》”

　　如果文档比视口小，或者说他还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统就是同一个。但是，一般来说，要在两种坐标之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。

　　例如，在文档坐标中如果一个元素的Y坐标是200px，并且用户已经把浏览器向下滚动75px；那么视口坐标中元素的Y坐标就是275px。文档坐标比视口坐标更加基础，并且在用户滚动中不会发生变化。

　　

二：查询元素的几何尺寸

　　判定一个元素的尺寸和位置最简单的办法就是调用它的getBoundingClientRectangle（）方法。他不需要参数，返回一个有left，right，top和bottom的属性。

var obox = document.getElementById("box");
var arr = obox.getBoundingClientRect();
console.log(arr.width)/*200*/

 三：总结

    var obox = document.getElementById("box");
    /*除了IE8及更早的版本外，其他的浏览器都可以用*/
    pageXOffset;
    pageYOffset;
    /*标准模式下的IE，任何浏览器*/
    document.documentElement.scrollLeft;
    document.documentElement.scrollTop;
    /*滚动条的位置*/
    document.documentElement.offsetHeight;
    document.documentElement.offsetWidth;
    /*元素的尺寸,以CSS像素返回它的屏幕尺寸，返回的尺寸包含元素的边框和内边距，出去了外边距*/
    obox.offsetWidth;
    obox.offsetHeight;
    /*元素的位置，返回x和y坐标*/
    obox.offsetLeft;
    obox.offsetTop;
    /*元素的尺寸，不包含边框大小，至包含内容和它的内边距。*/
    obox.clientWidth;
    obox.clientHeight;