一.offsetTop屬性:
此屬性可以獲取元素的上外緣距離最近采用定位父元素內(nèi)壁的距離，如果父元素中沒有采用定位的杉武，則是獲取上外邊緣距離文檔內(nèi)壁的距離。所謂的定位就是position屬性值為relative淀歇、absolute或者fixed线婚。
返回值是一個整數(shù)，單位是像素蜒灰。
此屬性是只讀的弦蹂。
二.offsetLeft屬性:
此屬性和offsetTop的原理是一樣的，只不過方位不同强窖，這里就不多介紹了凸椿。
三.offsetWidth屬性:
此屬性可以獲取元素的寬度，寬度值包括:元素內(nèi)容+內(nèi)邊距+邊框翅溺。不包括外邊距和滾動條部分脑漫。
返回值是一個整數(shù)，單位是像素咙崎。
此屬性是只讀的优幸。
四.offsetHeight屬性:
此屬性可以獲取元素的高度，高度值包括:元素內(nèi)容+內(nèi)邊距+邊框褪猛；不包括外邊距和滾動條部分网杆。
返回值是一個整數(shù)，單位是像素伊滋。
此屬性是只讀的碳却。
五.clientWidth屬性:
此屬性可以返回一個元素的寬度值，值是:元素的內(nèi)容+內(nèi)邊距笑旺；不包括邊框昼浦、外邊距和滾動條部分。
返回值是一個整數(shù)燥撞，單位是像素座柱。
此屬性是只讀的迷帜。
六.clientHeight屬性:
此屬性可以返回一個元素的高度值物舒，值是:元素的內(nèi)容+內(nèi)邊距。不包括邊框戏锹、外邊距和滾動條部分冠胯。
返回值是一個整數(shù)，單位是像素锦针。
此屬性是只讀的荠察。
七.scrollLeft屬性:
此屬性可以獲取或者設(shè)置對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離置蜀，也就是元素被滾動條向左拉動的距離。
返回值是一個整數(shù)悉盆，單位是像素盯荤。
此屬性是可讀寫的。
八.scrollTop屬性:
此屬性可以獲取或者設(shè)置對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離焕盟，也就是元素滾動條被向下拉動的距離秋秤。
返回值是一個整數(shù)，單位是像素脚翘。
此屬性是可讀寫的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div-bootom{
background-color: cadetblue;
width: 150px;
height: 300px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#div-content {
background-color: rebeccapurple;
width: 100px;
height: 600px;
left: 25px;
position: absolute;
}
</style>
<script>
window.onload = function () {
var divC = document.getElementById('div-content')
setInterval(locomotion,30)
function locomotion() {
console.log('輸出');
console.log(divC.offsetTop);
divC.style.top = divC.offsetTop - 5 + 'px'
if (divC.offsetTop > 0 ) {
divC.style.top = -divC.offsetHeight/2 + 'px'
}else if (divC.offsetTop < -divC.offsetHeight/2) {
divC.style.top = '0px'
}
}
}
</script>
</head>
<body>
<div id="div-bootom">
<div id="div-content">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
