本次說明僅在chrom環境下,ie等其他瀏覽器可能不同

1獲取顯示屏高度（pc和移動端）

window.screen.height => 這個好理解，不多說。

2獲取瀏覽器可視窗口高度（PC端）

document.documentElement.clientHeight => 就是網頁在瀏覽器中可見高度，不包括瀏覽器自身的狀態欄，隨著瀏覽器大小變化；

3獲取網頁內容高度

1）document.documentElement.scrollHeight = document.documentElement.offsetHeight => 就是整個網頁文檔body的高度，隨著網頁內容的多少變化，包括網頁內的所有border,margin,padding；

2）body.clientHeight = body.offsetHeight => body的內容高度，不包括margin和border值，實際上就是body的height值；

3）body.scrollHeight => 包括body的margin，body值，;

　　a 當網頁內容超出瀏覽器可視窗口高度值時，= body.clientHeight+margin+border = document.documentElement.scrollHeight ;

　　b 當網頁內容較少未超出時，= document.documentElement.clientHeigh 也就是瀏覽器窗口高度值（這是它的最小值）；

4滾動條的高度值

body.scrollTop => 頁面滾動上去的高度值；（註：document.docuemtnElement沒有該屬性）

這幾個屬性在前段開發中的應用場景：

1）下拉加載（移動端上拉加載），就是通過判斷元素是否顯示在當前可視窗口內，讀取數據並顯示

2）圖片的懶加載——前端網頁優化的一種手段，也是判斷用戶瀏覽的內容區域是否顯示在可視窗口中，替換圖片src屬性值。

需要註意的是：pc端獲取可視出口高度可使用document.documentElement.clientHeight，移動端不要使用該屬性（親測該值很高遠遠超過顯示器的高度iphone6達到1743px），使用window.screen.height獲取手機顯示的高度.

document.documentElement與body下clientHeight,scrollHeight等區別