首頁常見問題正文

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

更新時間:2023-06-23 來源:黑馬程序員 瀏覽量:

scroll 翻譯過來就是滾動的,我們使用 scroll 系列的相關(guān)屬性可以動態(tài)的得到該元素的大小、滾動距離等。scroll系列各種屬性的相關(guān)作用如下:
元素scroll的系列屬性
當希望盒子里的內(nèi)容滾動展示時,可以給這些屬性設(shè)置數(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
分享到:
在線咨詢 我要報名
和我們在線交談!