Bagaimana untuk kembali benar jika bahagian bawah halaman kelihatan menggunakan JavaScript?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-08-24 19:25:10

ke hadapan

798 orang telah melayarinya

如果使用 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

Salin selepas log masuk

scrollHeight -Ia ialah elemen DOM HTML dan sifat baca sahaja tetingkap. Ia mengembalikan ketinggian kandungan elemen, termasuk kandungan yang tidak kelihatan.

element.scrollHeight

Salin selepas log masuk

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

Salin selepas log masuk

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);

Salin selepas log masuk

Jika syarat di atas adalah benar, bahagian bawah halaman akan kelihatan.

Kaedah

Kami menyemak bahawa clientHeight dan < em>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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!