教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

元素scroll的相關屬性怎樣使用？

更新時間:2023年06月23日17時39分 來源:傳智教育 瀏覽次數(shù):

scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動態(tài)的得到該元素的大小、滾動距離等。scroll系列各種屬性的相關作用如下：
元素scroll的系列屬性
當希望盒子里的內(nèi)容滾動展示時，可以給這些屬性設置數(shù)值，控制寬度高度和被卷去的大小。

scroll控制盒子大小滾動距離

注意：如果瀏覽器的高(或?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
0 分享到：
和我們在線交談！