cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?

Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?

WBOY
WBOYke hadapan
2023-08-24 19:25:10792semak imbas

如果使用 JavaScript 页面底部可见，如何返回 true？

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.

rreeee

Atas 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!

JavaScript html 接口 dom
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mengalih keluar nilai palsu daripada tatasusunan JavaScript?Artikel seterusnya：Bagaimana untuk mengalih keluar nilai palsu daripada tatasusunan JavaScript?

Artikel berkaitan

Lihat lagi