瀏覽器滾動條高度的獲取

開始

最近做業務需求時，需要監聽滾動條scoll事件，獲取滾動條高度，用的document.body.scrollTop發現得到的值一直是0，後來做了一些查詢，挖出不少祕密，做次筆記，以免忘掉

先放結論：

1. 對有doctype申明的頁面 可以使用：document.documentElement.scrollTop
2. 沒有doctype申明的頁面使用：document.body.scrollTop
3. safari:特例獨行：使用 window.pageYOffset

所以我們可以這樣獲取scrollTop:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
複製程式碼

什麼是DTD：

DTD（文件型別定義）的作用是定義 XML 文件的合法構建模組。它使用一系列的合法元素來定義文件結構 在我們的頁面中是這樣展現

有些東西不手寫一遍永遠記不下來：

screen物件(針對的是整個螢幕)：

1. screen.widht|height:整個螢幕的高度跟寬度
2. screen.avaiWidth|availHeight: 螢幕可用寬高（減去底下工作列的高度）

window物件(針對的是瀏覽器)

1. window.outerWidth|outerHeight:整個瀏覽器的寬高
2. window.innerWidth|outerWidth:瀏覽器可用的寬高（出去工具欄的高度，但是包括滾動條）

元素物件

1. ele.offerWidth|offerHeight: 元素總的寬高(包括滾動距離)
2. body.clientWidth|clientHeight: 一般用來描述文旦視口的大小