pad 滾動條 總結 -o 鏈接 over padding 位置 出現

每個HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 這5個和元素高度、滾動、位置相關的屬性，單憑單詞很難搞清楚分別代表什麽意思之間有什麽區別。通過閱讀它們的文檔總結出規律如下：
clientHeight和offsetHeight屬性和元素的滾動、位置沒有關系它代表元素的高度，其中：
clientHeight：包括padding但不包括border、水平滾動條、margin的元素的高度。對於inline的元素這個屬性一直是0，單位px，只讀元素。

offsetHeight：包括padding、border、水平滾動條，但不包括margin的元素的高度。對於inline的元素這個屬性一直是0，單位px，只讀元素。

接下來討論出現有滾動條時的情況：
當本元素的子元素比本元素高且overflow=scroll時，本元素會scroll，這時：
scrollHeight: 因為子元素比父元素高，父元素不想被子元素撐的一樣高就顯示出了滾動條，在滾動的過程中本元素有部分被隱藏了，scrollHeight代表包括當前不可見部分的元素的高度。而可見部分的高度其實就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滾動條時討論scrollHeight才有意義，在沒有滾動條時scrollHeight==clientHeight恒成立。單位px，只讀元素。

scrollTop: 代表在有滾動條時，滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恒成立。單位px，可讀可設置。
offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素。

offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素。

作者：zsxrping
鏈接：https://www.imooc.com/article/17571
來源：慕課網

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop