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

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

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

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

頁面被卷去的頭部兼容性解決方案

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

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
    };
 } 
使用的時候  getScroll().left