1、滾動大小
scrollHeight: 在沒有滾動條的情況下，元素內容的總高度。
scrollWidth:在沒有滾動條的情況下，元素內容的總寬度
scrollLeft:被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。
scrollTop:被隱藏的內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。
scrollHeight和scrollWidth主要用於確定元素內容的實際大小
2、客戶區大小
客戶區大小是指元素內容即其邊框所佔據的空間大小。clientWidth和clientHeight。滾動條佔用的空間不計算在內。
元素內部的空間大小：document.element.clientWidth
獲取瀏覽器窗口大小：document.documentElement.clientHeight(表示HTML文檔所在窗口的當前高度)。還有一種方式是window.innerHeight
3、偏移量
offsetHeight:元素在垂直方向上佔用的空間大小，以像素計。包括元素的高度、（可見的）水平滾動條的寬度、上邊框高度和下邊框高度；
offsetWidth:元素在水平方向上佔用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度；
offsetLeft:元素的左外邊框至包含元素的左內邊框之間的像素距離；包含元素爲offsetParent。
offsetTop:元素的上外邊框至包含元素的上內邊框之間的像素距離；包含元素爲offsetParent。
3.1 offsetParent
offsetParent：與當前元素最近的經過定位（不爲static）的父級元素。
1）元素自身有fixed定位，offsetParent的結果null
2）元素自身無fixed定位，且父級元素都未經過定位，offsetParent的結果爲<body>
3）元素自身無fixed定位，且父級元素存在經過定位的元素，offsetParent的結果爲離自身元素最近的經過定位的父級元素
4）<body>元素的parentNode是null
3.2 頁面偏移量
某個父元素在頁面上的偏移量，將這個元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，並加上offsetParent的相應方向的邊框，如此循環直到根元素，皆可以得到元素到頁面的偏移量。
3.3 注意點
1）所有偏移量的屬性都是隻讀的
2）若元素設置display：none，則它的偏移量屬性都爲0
3）每次訪問偏移量屬性都需要重新計算，因此儘量避免重複訪問這些屬性
4、瀏覽器窗口可視區域大小
即網頁可見區域寬高，不包括工具欄和滾動條
1）對於IE9+、chrome、firefox、Opera、Safari
window.innerHeight瀏覽器窗口的內部高度；
window.innerWidth瀏覽器窗口的內部寬度；
2）對於IE8.7.6.5
document.documentElement.clientHeight:表示HTML文檔所在窗口的當前高度；
document.documentElement.clientWidth:表示HTML文檔所在窗口的當前寬度；
如要使用這個特性，可以用下面的兼容寫法
var width = document.documentElement.clientWidth || window.innerWidth;
var height = document.documentElement.clientHeight || window.innerHeight;
5、懶加載
利用這些獲取元素大小的方法，可以實現圖片的懶加載。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>懶加載</title>
<style>
.box1 {
height: 2000px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<img id="showImg" data-src="./test.png">
</body>
<script>
window.onscroll = function(){
var img = document.getElementById("showImg"),
clientHeight = document.documentElement.clientHeight || window.innerHeight,//獲取屏幕可視區的高度
offsetTop = img.offsetTop,//獲取元素上外邊框與父元素上內邊框之間的像素差
scrollTop = document.body.scrollTop;//獲取滾動條滾去的高度
//console.log(offsetTop, scrollTop, clientHeight);
//下面是判斷img標籤是否進入可視區
if(offsetTop <= clientHeight + scrollTop) {
img.src = img.dataset.src;
}
};
</script>
</html>
部分內容參考《JS高級程序設計第三版》