【笔记】 《js权威指南》- 第15章 脚本化文档 - 15.8 元素的几何形状和滚动

1.文档坐标和视口坐标：

文档坐标定义元素在整个文档中的位置，视口坐标定义元素在浏览器窗口或者窗体可视范围中的相对坐标。

查询滚动条位置：

function getScrollOffsets(w) {
    w = w || window;
    if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset};

    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return {x: d.documentElement.srollLeft, y:d.documentElment.scrollTop};

    return {x: d.body.scrollLeft, y: d.body.scrollTop};
}

查询视口尺寸：

function getViewportSize(w) {
    w = w || window;
    if (w.innerWidth != null)
        return {w: w.innerWidth, h: w.innerHeight};

    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return {w: d.documnetElement.clientWidth, h: d.documentElement.clientHeight};
    return {w: d.body.clientWidh, h: d.body.clientHeight};
}

2.查询元素的几何尺寸：

使用getBoundingClientRect方法获取元素包围盒的四个顶点相对于视口的坐标：

var box = e.getBoundingClientRect();
var offsets = getScrollOffsets();
var x = box.left + offsets.x;
var y = box.top + offsets.y;
var w = box.width || (box.right - box.left);
var h = box.height || (box.bottom - box.top);

3.获取视口上某个视口坐标上最上方的一个元素：

elementFromPoint(x, y);

4.滚动：

(1).scroll和scrollTo方法接受两个滚动条偏移量：

(2).scrollBy方法的参数是相对于当前滚动条位置的偏移量。

5.元素位置，尺寸，溢出的更多信息：

元素与位置尺寸相关的属性：

(1). client前缀的是不包含内边框和滚动条的大小,位置；

(2). scrollLeft, Top获取或设置滚动偏移量；

更古老的获取元素坐标的兼容写法：

function getElementPos(elt) {
	var x = 0, y =0;
	
	for (var e = elt; e != null; e = e.offsetParent) {
		x += e.offsetLeft;
		y += e.offsetTop;
	}
	
	for (var e = elt.parentNode; e != null; e = e.offsetParent) {
		x -= e.scrollLeft;
		y -= e.scrollTop;
	}
	
	return {x: x, y: y};
}