页面尺寸

注意区分window和document的区别  

Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()。 Document对象是Window对象的一部分。那么document.body 我们可以写成window.document.body；浏览器的HTML文档成为Document对象。

---

window

• window.screen.height

iHeight = window.screen.height

参考

• window.screen.avialHeight【只读】

availHeight = window.screen.availHeight

参考

• window.screenY【只读】

lLoc = window.screenY 

参考

• window.innerHeight【只读】

intViewportHeight = window.innerHeight

参考

• window.outerHeight【只读】

outWindowHeight = window.outerHeight

参考

• window.scrollTo

window.scrollTo(x-coord, y-coord)

参考

---

---

document

• element.clientHeight【只读】

var h = element.clientHeight   //cssHeight + padding

参考

• HTMLElement.offsetHeight【只读】

var intElemOffsetHeight = element.offsetHeight   //cssHeight + padding +border

参考

• Element.scrollHeight【只读】

var intElemScrollHeight = element.scrollHeight   //entireHeight(容器总高度)

参考

• Element.clientTop【只读】

vartop = element.clientTop   //border

参考

• HTMLElement.offsetTop【只读】

topPos = element.offsetTop   //offsetParent 距离

参考

• Element.scrollTop【可写】

var  intElemScrollTop = someElement.scrollTop
element.scrollTop = intValue   //滚动高度

参考

---

---

Event对象坐标

• screenX和screenY （相对于用户屏幕）
• clientX和clientY （相对于浏览器窗口）
• pageX和pageY （相对于整张页面/包括隐藏部分）
• offsetX和offsetY （相对于事件源）

---

---

==============

// 元素可见尺寸 getClientRects(); // 元素超出也可获取 getBoundingClientRect()。

参考：

• stackoverflow1  ：
• stackoverflow2
• 掘金  
• 读你