offset系列
注意事項(xiàng)
【1】所有偏移量屬性都是只讀的。
【2】如果給元素設(shè)置了display:none，則它的偏移量屬性都為0。
【3】每次訪問偏移量屬性都需要重新計(jì)算。
client系列
注意事項(xiàng)
【1】所有客戶區(qū)client屬性都是只讀的。
【2】如果給元素設(shè)置了display:none，則客戶區(qū)client屬性都為0。
【3】每次訪問客戶區(qū)client屬性都需要重新計(jì)算，重復(fù)訪問需要耗費(fèi)大量的性能，所以要盡量避免重復(fù)訪問這些屬性。如果需要重復(fù)訪問，則把它們的值保存在變量中，以提高性能。
scroll系列
scrollHeight
scrollHeight表示元素的總高度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分。
scrollWidth
scrollWidth表示元素的總寬度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分。
【1】沒有滾動條時(shí)，scrollHeight與clientHeight屬性結(jié)果相等，scrollWidth與clientWidth屬性結(jié)果相等。
【2】存在滾動條時(shí)，但元素設(shè)置寬高大于等于元素內(nèi)容寬高時(shí)，scroll和client屬性的結(jié)果相等。
【3】存在滾動條，但元素設(shè)置寬高小于元素內(nèi)容寬高，即存在內(nèi)容溢出的情況時(shí)，scroll屬性大于client屬性。
scrollLeft和scrollTop是唯一可寫的一組屬性。
[注意]為scrollLeft和scrollTop賦值為負(fù)值時(shí)，并不會報(bào)錯，而是靜默失敗。
滾動事件
scroll事件是在window對象上發(fā)生的，它表示的是頁面中相應(yīng)元素的變化。當(dāng)然，scroll事件也可以用在有滾動條的元素。
回到頂部
【1】錨點(diǎn)
使用錨點(diǎn)鏈接是一種簡單的返回頂部的功能實(shí)現(xiàn)。該實(shí)現(xiàn)主要在頁面頂部放置一個(gè)指定名稱的錨點(diǎn)鏈接，然后在頁面下方放置一個(gè)返回到該錨點(diǎn)的鏈接，用戶點(diǎn)擊該鏈接即可返回到該錨點(diǎn)所在的頂部位置。
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a>
</body>
【2】scrollTop
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。元素未滾動時(shí)，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度。
由于scrollTop是可寫的，可以利用scrollTop來實(shí)現(xiàn)回到頂部的功能獲取視圖的方法。
元素視圖
元素視圖的三個(gè)方法，包括getBoundingClientRect()、getClientRects()和elementFromPoint()，提供當(dāng)前元素節(jié)點(diǎn)的大小、它相對于視口(viewport)的位置等信息。但是，各個(gè)瀏覽器返回的對象包含的屬性不相同。
