更新時(shí)間:2023-06-23 來(lái)源:黑馬程序員 瀏覽量:
scroll 翻譯過(guò)來(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è)面被卷去的頭部,有兼容性問(wèn)題,因此被卷去的頭部通常有如下幾種寫(xiě)法:
1. 聲明了 DTD,使用 document.documentElement.scrollTop
2. 未聲明 DTD,使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset,IE9 開(kāi)始支持
具體使用如下: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
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營(yíng)】深圳跨境電商運(yùn)營(yíng)畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級(jí)93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開(kāi)發(fā)】上海校區(qū)AI鴻蒙開(kāi)發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開(kāi)發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開(kāi)發(fā)-Java】畢業(yè)5個(gè)工作日就業(yè)率98.18%,最高薪資 17.5k*13薪,全班平均薪資9244元
2025-09-19