Bagaimana untuk memahami skrol
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>
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)
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>
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( 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
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>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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah butang skrol?
Feb 22, 2023 pm 02:29 PM
tatal ialah kekunci kunci tatal, kekunci fungsi pada papan kekunci komputer. Kekunci tatal biasanya digunakan dalam perkataan dan Excel Apabila Kunci Tatal dimatikan dan kekunci pusing halaman digunakan, kawasan sel yang dipilih akan bergerak tetapi apabila kekunci Tatal Kunci ditekan, kawasan yang dipilih tidak akan bergerak daripada sel.
Bagaimana untuk memahami skrol
May 23, 2023 pm 01:40 PM
lebar tatal dan tinggi tatalTatal tinggiTatal tinggi mewakili jumlah ketinggian elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan pada halaman web disebabkan limpahan tatalLebar tatalLebar mewakili jumlah lebar elemen, termasuk bahagian halimunan yang tidak boleh dipaparkan di web halaman disebabkan limpahan [Nota] IE7-Browser Nilai pulangan adalah tidak tepat [1] Apabila tiada bar skrol, atribut scrollHeight dan clientHeight adalah sama, dan atribut scrollWidth dan clientWidth adalah sama //120120console.log(test.scrollHeight ,ujian.s
Apakah maksud lampu skrol papan kekunci?
Feb 20, 2023 pm 01:42 PM
Lampu tatal papan kekunci menyala bermakna "Kunci Tatal" didayakan; menatal. Kursor menatal halaman jika anda melepaskan kekunci ini, menekan kekunci atas dan bawah akan menatal kursor tanpa menatal halaman.
Cara menggunakan v-on:scroll untuk mendengar acara menatal dalam Vue
Jun 11, 2023 pm 12:14 PM
Vue ialah salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini Selain pemantauan acara biasa, Vue juga menyediakan arahan untuk memantau acara skrol, iaitu v-on:scroll. Artikel ini akan memperkenalkan secara terperinci cara menggunakan v-on:scroll untuk mendengar acara tatal dalam Vue. 1. Penggunaan asas arahan v-on:scroll Arahan v-on:scroll digunakan untuk memantau peristiwa penatalan elemen DOM Penggunaan asasnya adalah seperti berikut: <divv-on:scroll="sc
Bagaimana untuk menyembunyikan skrol dalam css
Jan 28, 2023 pm 02:02 PM
Cara menyembunyikan skrol dalam CSS: 1. Dalam Firefox, anda boleh menyembunyikan bar skrol melalui atribut "scrollbar-width: none; /* Firefox */" 2. Dalam pelayar IE, anda boleh menggunakan "-ms-prefix " atribut Tentukan gaya bar skrol; 3. Dalam Chrome dan Safari, anda boleh menggunakan pemilih bar skrol CSS dan kemudian menyembunyikannya melalui "display:none".
Apa itu tatal Ethereum? Bagaimana untuk mengendalikan tatal Ethereum?
Feb 15, 2025 pm 10:33 PM
Ethereum Scroll adalah penyelesaian skala Layer 2 yang direka untuk meningkatkan skalabiliti rangkaian Ethereum melalui teknologi Sharding dan ZK-Rollup. Ia menggabungkan kedua -dua teknologi ini untuk memproses urus niaga selari dan mengesahkan dengan cekap, dengan itu meningkatkan daya tampung rangkaian dan mengurangkan yuran transaksi. Tatal direka untuk menjadi lapisan lanjutan yang serasi untuk mesin maya Ethereum (EVM), yang membolehkan pengguna memproses transaksi dengan cepat dan ekonomi.
Niaga Hadapan Pra-Pasaran Scroll (SCR) Menjunam untuk Mencatat Rendah $1.18 Menjelang Airdrop 19 Okt.
Oct 12, 2024 am 12:34 AM
Tatal, rangkaian lapisan-2 pengetahuan sifar yang berkembang pesat, mengesahkan bahawa ia akan melancarkan titisan udaranya pada 19 Okt.
Pelancaran Token Tatal (SCR): Satu Langkah Ke Arah Desentralisasi
Oct 11, 2024 pm 10:18 PM
Pelancaran token datang kerana Scroll bertujuan untuk meningkatkan tadbir urusnya dan mengukuhkan peranannya sebagai pemain utama dalam ekosistem Ethereum.
