一.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è)置對象的最左邊到對象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離，也就是元素被滾動條向左拉動的距離。
返回值是一個整數(shù)，單位是像素。
此屬性是可讀寫的。
八.scrollTop屬性:
此屬性可以獲取或者設(shè)置對象的最頂部到對象在當(dāng)前窗口顯示的范圍內(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>
