JavaScript偏移量offset，可視區client，滾動scroll系列

一.
element.offsetTop element.offsetLeft
以上兩種方法獲得元素距離其父元素的上距離與左距離，但是父元素得設定定位，若沒有設定定位，則以body為主

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px;
            background-color: blanchedalmond;
        }
        
        .son {
            width: 100px;
            height: 100px;
            margin-left: 100px;
            background-color: black;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 500px;
            margin-left: 300px;
            border: 20px solid red;
            padding: 20px 20px;
        }
</style>
<div class="box1">
        <div class="son"></div>
</div>
<div class="box2"></div>
<script>
		var box1 = document.querySelector('.box1');
        console.log(box1.offsetTop);  //100
        console.log(box1.offsetLeft);  //100
        var son = document.querySelector('.son');
        console.log(son.offsetTop);  //0
        console.log(son.offsetLeft);  //100
</script>

element.offsetWidth element.offsetHeight
以上兩種方法獲得元素自身的寬度和高度(包含padding，border)

var box2 = document.querySelector('.box2');
console.log(box2.offsetWidth);  //280
console.log(box2.offsetHeight);  //280

element.offsetParent
以上方法獲得帶有定位的父級元素，若沒有設定定位，返回body

console.log(son.offsetParent);  //.box1

二.
client不含邊框，其餘的與offset相似
clientTop返回上邊框大小，clientLeft返回左邊框大小
clientWidth返回不含邊框的寬度，clientHeight返回不含邊框的高度

三.
scroll系列返回的是數值且不帶單位
1. element.scrollTop:返回被捲去的上側距離
2. element.scrollLeft:返回被捲去的左側距離
3. element.scrollWidth:返回自身實際的寬度，不含邊框(盒子裡面內容撐開的寬度)
4. element.scrollHeight:返回自身實際的高度，不含邊框(盒子裡面內容撐開的高度)
5. window.pageYOffset獲得頁面被捲去的頭部距離
window.pageXOffset獲得頁面被捲去的左側距離