瀏覽器滾動條高度的獲取

開始

最近作業務需求時，須要監聽滾動條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: 通常用來描述文旦視口的大小