瀏覽器的寬高

window

window 即為瀏覽器本身，瀏覽器的高度，有分兩種，包含工具列與不包含，當然包含工具列的值會比較大，只要不 resize，這個值是不會變的。

window.innerHeight 是不包含工具列的，比較常使用到，是瀏覽器的可視範圍。
window.outerHeight 則是包含的。

網頁文件的寬高

[document]

document 即為當前瀏覽的網頁，網頁可能很大，比瀏覽器視窗還大，因此 document 的寬高比 window 寬高還要大是正常現象，網頁內容的高度，取值用

• document.body.clientHeight
• document.documentElement.clientHeight
• document.documentElement.scrollHeight

三者等價，用document.body就好，不要用 document.height。
[document]: https://developer.mozilla.org/en-US/docs/Web/API/document

width 以此類推，不贅述。

頁面捲動距離

網頁開出來之後，初始捲動的值都是 0，往下滑動之後，Y 軸的值會增加，往右滑動，X 軸的值會增加。這個數值配合 window/document height，可以算出現在出現在使用者面前的頁面是整個網頁的哪一段，例如常見的一些功能是捲到頁面底端之後出現某些模組、按鈕、圖案，就需要用這數值判斷。

以 Y 軸 (垂直)為例

• [window.scrollY]
• window.pageYOffset
• document.defaultView.scrollY
• document.defaultView.pageYOffset

這些數字永遠一樣，統一使用 [window.scrollY] 就好。
[window.scrollY]: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

window.scrollTo 則是可以用程式控制頁面捲動到定點，在 iOS 早期的版本，手機版頁面為了讓上方網址列在讀取完之後自動收起，都會用 window.scrollTo(0, 1); 讓瀏覽器以為使用者已經捲動頁面而自動收起網址，不過 mobile safari 已經沒有這樣的設計。

window.scrollBy 則是控制捲動的幅度，稍有不同。

useful framework

YUI

YUI 有很多好用的 utility function，使用 Y.DOM 就可以拿到寬高。

• Y.DOM.winHeight()

• Y.DOM.winWidth()

• Y.DOM.docHeight()

• Y.DOM.docWidth()

• Y.DOM.docScrollY()
  則是可以拿到現在頁面 Y軸(垂直)的捲動值

• Y.DOM.docScrollX()
  可以拿到現在頁面 X軸(橫向)的捲動值

jQuery

jQuery 太有名了，應該沒有人不知道。用 height() 就可以拿到高度，scrollTop 則可以取的 Y軸(垂直)捲動值，Function Naming 滿直覺的。

• $(window).height();

• $(document).height();

• $(window).width();

• $(document).width();

• $(window).scrollTop() 可以拿到現在頁面 Y軸(垂直)的捲動值

• $(window).scrollLeft() 可以拿到現在頁面 X軸(橫向)的捲動值