元素內(nèi)容溢出 && 設置了元素的overflow屬性，產(chǎn)生滾動條或超出內(nèi)容被隱藏

實際上，不管是滾動條還是超出內(nèi)容被隱藏，這2種情況都可操作下面4個屬性，超出內(nèi)容被隱藏時，雖然沒有滾動條，但是可以用scrollTo()這個函數(shù)來滾動元素內(nèi)容，也會產(chǎn)生 scrollTop 和 scrollLeft 。

屬性：

元素.scrollTop
【元素自身滾動條】距離【元素自身上邊緣】的距離（元素內(nèi)容被卷出的部分）
元素.scrollLeft
【元素自身滾動條】距離【元素自身左邊緣】的距離（元素內(nèi)容被卷出的部分）

元素.scrollHeight = (子內(nèi)容高度) + (元素padding)
= 元素css樣式高度 + 元素padding + 元素.scrollTop的最大值

元素.scrollWidth = (子內(nèi)容寬度) + (元素padding)
= 元素css樣式寬度 + 元素padding + 元素.scrollLeft的最大值

事件：

元素.onscroll

scroll 事件會在 文檔 或 一個元素 滾動時觸發(fā)。。。

元素，滾動時觸發(fā) 和 元素滾動條，滾動時觸發(fā) 是一個意思~?。L動條長在元素上，滾動滾動條，就是在滾動元素 ）

HTML事件處理程序：

<element onscroll="myScript">

DOM0級事件處理程序：

object.onscroll = function() {
    myScript
};

DOM2級事件處理程序：

object.addEventListener("scroll", myScript);

方法：

元素.scrollTo(x, y)
通過scrollTo()這個函數(shù)，來操作滾動條！??！
0,0 時，可做回到頂部效果...
x的值即為：元素.scrollLeft的值，y的值即為：元素.scrollTop的值...
x、y的值越大，元素內(nèi)容被卷出的部分越多...

注意區(qū)分：元素本身 和 子內(nèi)容

整個文檔的滾動條：

頁面有DTD（指定了 DOCTYPE），使用document.documentElement獲??；
頁面無DTD（沒有指定 DOCTYPE），使用 document.body 獲取。
為了兼容（不管有沒有 DTD）可以使用如下代碼：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

但是，監(jiān)聽整個文檔的scroll事件時，卻需要綁定到 window 上 。。。
各瀏覽器對于onscroll事件的支持：

onscroll事件的各瀏覽器兼容情況.png