Rumah > Artikel > Operasi dan penyelenggaraan > Bagaimana untuk memahami skrol
Bagaimana untuk memahami skrol
- WBOYke hadapan
- 2023-05-23 13:40:321453semak imbas
Lebar dan ketinggian tatal
scrollHeight
scrollHeight mewakili jumlah ketinggian elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan pada halaman web kerana limpahan
scrollWidth
scrollWidth mewakili jumlah lebar elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan pada halaman web kerana limpahan
[ Nota] Nilai pulangan penyemak imbas IE7 tidak tepat
【1】Apabila tiada bar skrol, hasil atribut scrollHeight dan clientHeight adalah sama dan hasil atribut scrollWidth dan clientWidth adalah sama
rreee【2】Apabila terdapat bar skrol, tetapi lebar dan tinggi elemen ditetapkan menjadi lebih besar daripada atau sama dengan Apabila lebar dan tinggi kandungan elemen adalah sama, hasil tatal dan atribut klien adalah sama
<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
[3] Terdapat bar skrol, tetapi lebar dan ketinggian tetapan elemen adalah lebih kecil daripada lebar dan ketinggian kandungan elemen, iaitu, apabila kandungan melimpah, atribut skrol lebih besar daripada klien Harta
[Nota] Terdapat masalah keserasian dengan sifat scrollHeight Dalam pelayar chrome dan safari, scrollHeight mengandungi padding-bottom; IE dan firefox tidak mengandungi padding-bottom Saiz halaman
document.documentElement.clientHeight mewakili saiz kawasan kelihatan halaman, manakala document.documentElement.scrollHeight mewakili saiz sebenar kandungan elemen html. Walau bagaimanapun, disebabkan prestasi berbeza setiap penyemak imbas, ia dibahagikan kepada situasi berikut
[1] Apabila elemen html tidak mempunyai bar skrol, klien dan atribut skrol IE dan Firefox sentiasa sama, dan saiz kawasan visual dikembalikan; manakala safari dan chrome berkelakuan seperti biasa, clientHeight mengembalikan saiz kawasan yang boleh dilihat, dan scrollHeight mengembalikan saiz kandungan elemen
<div id="test" > 内容<br>内容<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>
[2] Apabila elemen html mempunyai bar skrol, semua penyemak imbas berkelakuan seperti biasa. clientHeight menyediakan saiz kawasan viewport, manakala scrollHeight menyediakan saiz kandungan elemen
<div id="test" > 内容</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>serasi
Oleh itu, apabila anda ingin mendapatkan ketinggian sebenar dokumen, anda perlu mendapatkan < Nilai maksimum scrollHeight dan clientHeight bagi elemen html> atribut mewakili bilangan piksel yang tersembunyi di atas kawasan kandungan . Apabila elemen tidak ditatal, nilai scrollTop ialah 0. Jika elemen ditatal secara menegak, nilai scrollTop adalah lebih besar daripada 0 dan mewakili lebar piksel kandungan halimunan di atas elemen
scrollLeftAtribut scrollLeft menunjukkan bilangan piksel yang tersembunyi di sebelah kiri kawasan kandungan. Apabila elemen tidak ditatal, nilai scrollLeft ialah 0. Jika elemen ditatal secara mendatar, nilai scrollLeft lebih besar daripada 0 dan mewakili lebar piksel kandungan halimunan di sebelah kiri elemen Apabila bar skrol menatal ke bahagian bawah kandungan, Mematuhi persamaan berikut
//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)rrree
Tidak seperti sifat scrollHeight dan scrollWidth, scrollLeft dan scrollTop boleh ditulis
[Nota] Apabila memberikan nilai negatif untuk tatalKiri dan tatal Atas, tiada ralat akan dilaporkan, tetapi gagal secara senyap <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>
Tatal halaman
Secara teorinya, tatal halaman boleh dicerminkan dan dikawal melalui document.documentElement.scrollTop dan scrollLeft; walau bagaimanapun, pelayar chrome dan safari menggunakan document.body .scrollTop dan scrollLeft dikawal oleh
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
Oleh itu, keserasian ketinggian tatal halaman ditulis sebagai
rreeeKembali ke bahagian atasBoleh dicapai menggunakan scrollTop Kembali ke fungsi atas
scrollHeight == scrollTop + clientHeight
<div id="test" >
内容</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>
Terdapat dua sifat baca sahaja tetingkap yang boleh mendapatkan nilai piksel bagi keseluruhan halaman menatal, ia ialah pageXOffset dan pageYOffset
pageXOffsetpageXOffset mewakili nilai piksel halaman yang menatal ke arah mendatar
pageYOffsetpageYOffset mewakili nilai piksel halaman yang menatal dalam arah menegak [ Nota] IE8-browser tidak menyokong
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>
kaedah tatal
scrollTo(x,y)
kaedah skrolTo(x,y) untuk menatal semasa Untuk dokumen yang dipaparkan dalam tetingkap, biarkan titik yang ditentukan oleh koordinat x dan y dalam dokumen terletak di penjuru kiri sebelah atas kawasan paparan
<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>
scrollBy(x,y)
scrollBy( Kaedah x, y) menatal dokumen yang dipaparkan dalam tetingkap semasa . x dan y nyatakan jumlah relatif penatalan var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
[Aplikasi kecil]
Gunakan scrollBy() tambah pemasa setInterval untuk mencapai fungsi Tatal yang mudah dan pantas
function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
scrollIntoView()
Kaedah Element.scrollIntoView menatal elemen semasa ke dalam kawasan penyemak imbas yang boleh dilihat
Kaedah ini boleh menerima nilai Boolean sebagai parameter. Jika benar, ini bermakna bahagian atas elemen diselaraskan dengan bahagian atas bahagian yang boleh dilihat pada kawasan semasa (dengan syarat kawasan semasa boleh ditatal jika ia palsu, ini bermakna bahagian bawah elemen adalah sejajar dengannya); ekor bahagian yang boleh dilihat pada kawasan semasa (dengan syarat kawasan semasa boleh ditatal) ). Jika parameter ini tidak disediakan, lalai adalah benar
<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>
scrollIntoViewIfNeeded()Kaedah scrollIntoViewIfNeeded(true) hanya berfungsi apabila elemen semasa tidak kelihatan dalam viewport. Tatal tetingkap penyemak imbas atau elemen bekas sehingga ia kelihatan. Jika elemen semasa kelihatan dalam viewport, kaedah ini tidak melakukan apa-apa
Apabila parameter alignCenter ditetapkan kepada benar, elemen akan dipaparkan secara menegak di tengah viewport yang mungkin
[Nota ]Kaedah ini hanya disokong oleh chrome dan safari
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>
scrollByLines(lineCount)
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</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)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>
滚动事件
在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>Atas ialah kandungan terperinci Bagaimana untuk memahami skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!