scroll元素添加滾動(dòng)條效果，控制盒子大小和滾動(dòng)距離

scroll 翻譯過來(lái)就是滾動(dòng)的，我們使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。scroll系列各種屬性的相關(guān)作用如下：

當(dāng)希望盒子里的內(nèi)容滾動(dòng)展示時(shí)，可以給這些屬性設(shè)置數(shù)值，控制寬度高度和被卷去的大小。

注意：如果瀏覽器的高(或?qū)?度不足以顯示整個(gè)頁(yè)面時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。當(dāng)滾動(dòng)條向下滾動(dòng)時(shí)，頁(yè)面上面被隱藏掉的高度，我們就稱為頁(yè)面被卷去的頭部。滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā) onscroll 事件。

頁(yè)面被卷去的頭部兼容性解決方案

需要注意的是，頁(yè)面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

1. 聲明了 DTD，使用 document.documentElement.scrollTop

2. 未聲明 DTD，使用 document.body.scrollTop

3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 開始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的時(shí)候  getScroll().left