Rumah > Artikel > hujung hadapan web > Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?
Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?
- WBOYke hadapan
- 2023-08-24 19:25:10740semak imbas
Dalam tutorial ini kami akan menyemak sama ada bahagian bawah halaman kelihatan kepada pengguna. Kita boleh mencapai ini dengan menggunakan tinggi tetingkap dan ketinggian scrolltetingkap. Untuk menulis kod ini, kita perlu mengetahui tiga kaedah JavaScript seperti berikut:
scrollY - Ia adalah sifat baca sahaja tetingkap dan mengembalikan bilangan piksel yang ada pada dokumen untuk menatal menegak.
window.scrollY
scrollHeight -Ia ialah elemen DOM HTML dan sifat baca sahaja tetingkap. Ia mengembalikan ketinggian kandungan elemen, termasuk kandungan yang tidak kelihatan.
element.scrollHeight
clientHeight - Ia juga merupakan sifat baca sahaja yang mengembalikan ketinggian visual elemen dalam piksel, termasuk pelapik, tetapi bukan sempadan, bar skrol atau jidar.
element.clientHeight window.clientHeight
Nota - Ketiga-tiga kaedah di atas mengukur nilai elemen dalam piksel.
Syntax
Berikut ialah sintaks syarat yang perlu disemak jika kelihatan di bahagian bawah halaman.
document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);
Jika syarat di atas adalah benar, bahagian bawah halaman akan kelihatan.
Kaedah
Kami menyemak bahawa clientHeight dan scrollY adalah lebih besar daripada atau sama dengan scrollHeight atau clientHeight. Jika keadaan ini benar, bahagian bawah halaman akan kelihatan. Oleh itu, kami mentakrifkan fungsi yang mengembalikan benar jika syarat dipenuhi.
Contoh
Menggunakan clientHeight harta documentElement>
Dalam program di bawah, kami menyemak sama ada bahagian bawah halaman kelihatan. Kami menggunakan sifat clientHeight documentElement untuk menyemak syarat yang ditakrifkan dalam bahagian sintaks.
<!DOCTYPE html>
<html>
<head>
<title>Example - Bottom Visible JavaScript</title>
</head>
<body>
<div style="margin-bottom:100px;">
<h3>Checking if bottom of page is visible</h3>
<p id = "bottom"> Is bottom of the Page visible?<br></p>
</div>
<div> You reached to the bottom of the page.</div>
<script>
const bottomVisible = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight ||
document.documentElement.clientHeight);
console.log(bottomVisible());
document.getElementById("bottom").innerHTML += bottomVisible()
</script>
</body>
</html>Dalam kod di atas, kami membandingkan dua nilai, satu ialah jumlah ketinggian pelanggan dan skrolY, dan satu lagi ialah operasi ATAU ketinggian skrol dan ketinggian pelanggan. Apabila jumlah ketinggian pelanggan dan skrolY lebih besar daripada atau sama dengan operasi ATAU ketinggian skrol dan ketinggian pelanggan, nilai hasil adalah benar, menunjukkan bahawa bahagian bawah halaman kelihatan.
Contoh
Menggunakan clientHeightproperty windowantaramuka
Dalam program di bawah, kami menyemak sama ada bahagian bawah halaman kelihatan atau tidak. Kami menggunakan sifat clientHeight antara muka window untuk menyemak syarat yang ditakrifkan dalam bahagian sintaks.
<!DOCTYPE html>
<html>
<head>
<title>Example - Bottom Visible JavaScript</title>
</head>
<body>
<div style="margin-bottom:100px;">
<h3>Checking if bottom of page is visible</h3>
<p id = "bottom"> Is bottom of the Page visible?<br></p>
</div>
<div> You reached to the bottom of the page.</div>
<script>
const bottomVisible = () =>
window.innerHeight + window.scrollY >=(document.documentElement.scrollHeight || window.innerHeight);
console.log(bottomVisible());
document.getElementById("bottom").innerHTML += bottomVisible()
</script>
</body>
</html>Contoh
Bawah halaman tidak kelihatan
Dalam program di bawah, kami menetapkan margin bawah div tinggi supaya bahagian bawah halaman tidak kelihatan.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!