瀏覽器的寬高

window

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

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

網頁文件的寬高

document

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

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

三者等價,用document.body就好,不要用 document.height。 width 以此類推,不贅述。

頁面捲動距離

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

以 Y 軸 (垂直)為例

  • window.scrollY
  • window.pageYOffset
  • document.defaultView.scrollY
  • document.defaultView.pageYOffset

這些數字永遠一樣,統一使用 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軸(橫向)的捲動值