滾動寬高
scrollHeight
scrollHeight表示元素的總高度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分
scrollWidth
scrollWidth表示元素的總寬度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分
[注意]IE7-瀏覽器返回值是不準(zhǔn)確的
【1】沒有滾動條時，scrollHeight與clientHeight屬性結(jié)果相等，scrollWidth與clientWidth屬性結(jié)果相等
<div id="test" ></div><script>//120?120console.log(test.scrollHeight,test.scrollWidth);//120?120console.log(test.clientHeight,test.clientWidth);</script>
【2】存在滾動條時，但元素設(shè)置寬高大于等于元素內(nèi)容寬高時，scroll和client屬性的結(jié)果相等
<div id="test" > ????內(nèi)容<br>內(nèi)容<br></div><script>//103(120-17)?103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17)?103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
【3】存在滾動條，但元素設(shè)置寬高小于元素內(nèi)容寬高，即存在內(nèi)容溢出的情況時，scroll屬性大于client屬性
[注意]scrollHeight屬性存在兼容性問題，chrome和safari瀏覽器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom
<div id="test" > ????內(nèi)容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
頁面尺寸
document.documentElement.clientHeight表示頁面的可視區(qū)域的尺寸，而document.documentElement.scrollHeight表示html元素內(nèi)容的實際尺寸。但是由于各個瀏覽器表現(xiàn)不一樣，分為以下幾種情況
【1】html元素沒有滾動條時，IE和firefox的client和scroll屬性始終相同，且返回可視區(qū)的尺寸大??；而safari和chrome表現(xiàn)正常，clientHeight返回可視區(qū)域大小，而scrollHeight返回元素內(nèi)容大小
//firefox:??755?755//chrome:???947?8(body元素的margin)//safari:???744?8(body元素的margin)//IE:???????768?768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
【2】html元素存在滾動條時，各個瀏覽器都表現(xiàn)正常。clientHeight提供了視口區(qū)域的尺寸，而scrollHeight則提供了元素內(nèi)容的尺寸
<body ><script>//firefox:??755?1016(1000+8*2)//chrome:???947?1016(1000+8*2)//safari:???744?1016(1000+8*2)//IE:???????768?1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>
兼容
因此要取得文檔實際高度時，要取得元素的scrollHeight和clientHeight的最大值
var?docHeight?=?Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var?docWidth??=?Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
滾動長度
scrollTop
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素數(shù)。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度
scrollLeft
scrollLeft屬性指示內(nèi)容區(qū)域左側(cè)隱藏的像素數(shù)量。元素未滾動時，scrollLeft的值為0，如果元素被水平滾動了，scrollLeft的值大于0，且表示元素左側(cè)不可見內(nèi)容的像素寬度
當(dāng)滾動條滾動到內(nèi)容底部時，符合以下等式
scrollHeight?==?scrollTop??+?clientHeight
<div id="test" >
????內(nèi)容</div><button id='btn1'>點擊</button><div id="result"></div><script>btn1.onclick?=?function(){
????result.innerHTML?=?'scrollTop:'?+?test.scrollTop+';clientHeight:'?+?test.clientHeight?+?';scrollHeight:'?+?test.scrollHeight
}</script>
與scrollHeight和scrollWidth屬性不同的是，scrollLeft和scrollTop是可寫的
[注意]為scrollLeft和scrollTop賦值為負(fù)值時，并不會報錯，而是靜默失敗
<div id="test" >
????內(nèi)容</div><button id='btn1'>向下滾動</button><button id='btn2'>向上滾動</button><script>btn1.onclick?=?function(){test.scrollTop?+=?10;}
btn2.onclick?=?function(){test.scrollTop?-=?10;}</script>
頁面滾動
理論上，通過document.documentElement.scrollTop和scrollLeft可以反映和控制頁面的滾動；但是chrome和safari瀏覽器是通過document.body.scrollTop和scrollLeft來控制的
<body ><button id='btn1' >點擊</button><div id="result" ></div><script>btn1.onclick?=?function(){
????result.innerHTML?=?'html的scrollTop:'?+?document.documentElement.scrollTop?+';body的scrollTop:'?+?document.body.scrollTop;
}</script>????</body>
所以，頁面的滾動高度兼容寫法是
var?docScrollTop?=?document.documentElement.scrollTop?||?document.body.scrollTop
回到頂部
可以利用scrollTop來實現(xiàn)回到頂部的功能
function?scrollTop(){????if((document.body.scrollTop?||?document.documentElement.scrollTop)?!=?0){
????????document.body.scrollTop?=?document.documentElement.scrollTop?=?0;
????}
}
<body >
<button id='btn' >回到頂部</button>
<script>function?scrollTop(){????if((document.body.scrollTop?||?document.documentElement.scrollTop)?!=?0){
????????document.body.scrollTop?=?document.documentElement.scrollTop?=?0;
????}
}
btn.onclick?=?scrollTop;</script>
</body>
還有兩個window的只讀屬性可以獲取整個頁面滾動的像素值，它們是pageXOffset和pageYOffset
pageXOffset
pageXOffset表示水平方向上頁面滾動的像素值
pageYOffset
pageYOffset表示垂直方向上頁面滾動的像素值
[注意]IE8-瀏覽器不支持
<body ><button id='btn1' >點擊</button><div id="result" ></div><script>btn1.onclick?=?function(){
????result.innerHTML?=?'pageYOffset:'?+?window.pageYOffset;
}</script>????</body>
滾動方法
scrollTo(x,y)
scrollTo(x,y)方法滾動當(dāng)前window中顯示的文檔，讓文檔中由坐標(biāo)x和y指定的點位于顯示區(qū)域的左上角
<body ><button id='btn' >滾動</button><script>btn.onclick?=?function(){scrollTo(0,0);}</script>
scrollBy(x,y)
scrollBy(x,y)方法滾動當(dāng)前window中顯示的文檔，x和y指定滾動的相對量
<body ><button id='btn1' >向下滾動</button><button id='btn2' >向上滾動</button><script>btn1.onclick?=?function(){scrollBy(0,100);}
btn2.onclick?=?function(){scrollBy(0,-100);}</script>
【小應(yīng)用】
利用scrollBy()加setInterval計時器實現(xiàn)簡單的快速滾動功能
<body ><button id='btn1' >開始滾動</button><button id='btn2' >停止?jié)L動</button><script>var?timer?=?0;
btn1.onclick?=?function(){
????timer?=?setInterval(function(){
????????scrollBy(0,10);
????},100)}
btn2.onclick?=?function(){
????clearInterval(timer);
????timer?=?0;
}</script>
scrollIntoView()
Element.scrollIntoView方法滾動當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域
該方法可以接受一個布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對齊（前提是當(dāng)前區(qū)域可滾動）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對齊（前提是當(dāng)前區(qū)域可滾動）。如果沒有提供該參數(shù)，默認(rèn)為true
<body ><div id="test" ></div><button id='btn1' >滾動到頁面開頭</button><button id='btn2' >滾動到頁面結(jié)尾</button><script>btn1.onclick?=?function(){
????test.scrollIntoView();
};
btn2.onclick?=?function(){
????test.scrollIntoView(false);
}</script>
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(true)方法只在當(dāng)前元素在視口中不可見的情況下，才滾動瀏覽器窗口或容器元素，最終讓它可見。如果當(dāng)前元素在視口中可見，這個方法什么也不做?
當(dāng)alignCenter參數(shù)設(shè)置為true時，元素會盡可能地顯示在視口的垂直中心位置上
[注意]該方法只有chrome和safari支持
<body ><div id="test" ></div><button id='btn' >滾動到頁面中間</button><script>btn.onclick?=?function(){
????test.scrollIntoViewIfNeeded(true)
};</script>
scrollByLines(lineCount)
scrollByLines(lineCount)方法將元素的內(nèi)容滾動指定的行髙，lineCount值可以是正值， 也可以是負(fù)值
[注意]該方法只有safari支持
<div id="test" >
????內(nèi)容</div><button id='btn1'>向下滾動</button><button id='btn2'>向上滾動</button><script>btn1.onclick?=?function(){test.scrollByLines(1);}
btn2.onclick?=?function(){test.scrollByLines(-1);}</script>
scrollByPages(pageCount)
scrollByPages(pageCount)方法將元素的內(nèi)容滾動指定的頁面高度，具體高度由元素的高度決定
[注意]該方法只有safari支持
<div id="test" >
????內(nèi)容</div><button id='btn1'>向下滾動</button><button id='btn2'>向上滾動</button><script>btn1.onclick?=?function(){test.scrollByPages(1);}
btn2.onclick?=?function(){test.scrollByPages(-1);}</script>
滾動事件
在頁面中相應(yīng)元素發(fā)生變化時，scroll事件會在window對象上觸發(fā)。當(dāng)然，scroll事件也可以用在有滾動條的元素上
<body ><div id="result" ></div><script>window.onscroll?=?function(){
????result.innerHTML?=?'頁面的scrollTop:'?+?(document.documentElement.scrollTop||document.body.scrollTop);
}</script>????</body>以上是滾動scroll如何理解的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
scroll是什么按鍵
Feb 22, 2023 pm 02:29 PM
scroll是滾動鎖定鍵，是計算機(jī)鍵盤上的功能鍵。scroll鍵常用于word和Excel中，在Scroll Lock關(guān)閉的狀態(tài)下，使用翻頁鍵時，單元格選定區(qū)域會隨之發(fā)生移動；但是當(dāng)按下了Scroll Lock鍵后，就不會移動選定的單元格。
鍵盤scroll燈亮什么意思
Feb 20, 2023 pm 01:42 PM
鍵盤scroll燈亮的意思是指“滾動鎖”被啟用；Scroll Lock鍵在win系統(tǒng)中不用，但是部分軟件會使用到這個功能鍵，按下此鍵后，在Excel上、下鍵滾動時，會鎖定光標(biāo)而滾動頁面；如果放開此鍵，則按上、下鍵時會滾動光標(biāo)而不滾動頁面。
Vue中如何使用v-on:scroll監(jiān)聽滾動事件
Jun 11, 2023 pm 12:14 PM
Vue是目前比較流行的前端框架之一，除了常見的事件監(jiān)聽外，Vue還提供了一種用于監(jiān)聽滾動事件的指令，即v-on:scroll。本文將詳細(xì)介紹如何在Vue中使用v-on:scroll監(jiān)聽滾動事件。一、v-on:scroll指令基本用法v-on:scroll指令用于監(jiān)聽DOM元素的滾動事件，其基本用法如下：
滾動scroll如何理解
May 23, 2023 pm 01:40 PM
滾動寬高scrollHeight scrollHeight表示元素的總高度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分scrollWidth scrollWidth表示元素的總寬度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分 [注意]IE7-瀏覽器返回值是不準(zhǔn)確的 【1】沒有滾動條時，scrollHeight與clientHeight屬性結(jié)果相等，scrollWidth與clientWidth屬性結(jié)果相等//120120console.log(test.scrollHeight,test.s
css 怎么隱藏scroll
Jan 28, 2023 pm 02:02 PM
css隱藏scroll的方法：1、在Firefox中，可以通過“scrollbar-width: none; /* Firefox */”屬性實現(xiàn)隱藏滾動條；2、在IE瀏覽器中，可以使用“-ms-prefix”屬性定義滾動條樣式；3、在Chrome和Safari中，可以用CSS滾動條選擇器，然后通過“display:none”隱藏即可。
什么是以太坊scroll？以太坊scroll怎么操作？
Feb 15, 2025 pm 10:33 PM
以太坊 Scroll 是一種第 2 層擴(kuò)展解決方案，旨在通過分片和 ZK-Rollup 技術(shù)提升以太坊網(wǎng)絡(luò)的可擴(kuò)展性。它結(jié)合了這兩項技術(shù)，將交易并行處理并高效驗證，從而大幅提高網(wǎng)絡(luò)吞吐量并降低交易費用。Scroll 旨在成為以太坊虛擬機(jī) (EVM) 的兼容擴(kuò)展層，允許用戶快速且經(jīng)濟(jì)地處理交易。
Scroll (SCR) 代幣發(fā)行：邁向去中心化的一步
Oct 11, 2024 pm 10:18 PM
此次代幣的推出正值 Scroll 旨在加強(qiáng)其治理并鞏固其作為以太坊生態(tài)系統(tǒng)關(guān)鍵參與者的角色。
快速發(fā)展的零知識二層網(wǎng)絡(luò) Scroll 確認(rèn)將于 10 月 19 日推出空投
Oct 12, 2024 am 12:14 AM
這次回落的部分原因是更廣泛的加密市場表現(xiàn)不佳，恐懼和貪婪指數(shù)一直低于 45。比特幣也未能突破 65,000 美元的阻力點。
