Kaedah yang ditulis dalam jquery untuk menentukan sama ada bar skrol div telah mencapai bahagian bawah [disyorkan]

Kaedah yang ditulis dalam jquery untuk menentukan sama ada bar skrol div telah mencapai bahagian bawah [disyorkan]_jquery

PHP中文网

Lepaskan： 2016-05-16 15:03:04

asal

1625 orang telah melayarinya

Terdapat banyak konsep yang berkaitan dengan bar skrol dalam jQuery, tetapi terdapat tiga sifat yang berkaitan dengan penyeretan bar skrol, iaitu: scrollTop, scrollLeft, dan scrollHeight. Antaranya, hampir tiada kemahiran aplikasi untuk harta scrollHeight yang terdapat di Internet, dan saya hanya perlu menggunakannya.

Kami kini hanya membincangkan sifat scrollTop dan scrollHeight yang berkaitan dengan menatal menegak.

1. Pemahaman yang betul tentang sifat bar skrol:

Andaikan terdapat kod Html berikut:

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

Salin selepas log masuk

Memandangkan ketinggian teg p dalam lebih panjang daripada teg luar, dan p luar membenarkan bar skrol menegak muncul secara automatik, anda boleh melihat bar skrol menegak selepas membukanya dengan penyemak imbas. Seret bar skrol ke bawah pada jarak tertentu dan kesan halaman yang anda lihat adalah seperti berikut (a dan b di sebelah kanan ditanda dengan PS selepas saya menangkap gambar):

Kaedah yang ditulis dalam jquery untuk menentukan sama ada bar skrol div telah mencapai bahagian bawah [disyorkan]_jquery

Jadi, apakah sifat scrollTop dan scrollHeight bagi p luaran di sini?

Sesetengah orang mengatakan bahawa scrollTop adalah sama dengan a yang ditanda dalam gambar. scrollHeight adalah sama dengan ketinggian p luar, 500px. Sebenarnya, tiada satu pun daripada mereka yang betul.

Sebenarnya, a dan b yang ditanda dalam gambar tidak mempunyai makna khusus untuk kita memprogram dan menulis kod js Ia hanya mempunyai makna simbolik.

Malah, dalam kod js, bar skrol diabstraksikan sebagai "titik". scrollHeight sebenarnya bukan "ketinggian bar skrol" (b), tetapi mewakili ketinggian yang bar skrol perlu tatal, iaitu ketinggian p dalaman ialah 750px. Dan scrollTop menunjukkan jumlah kedudukan semasa bar skrol (titik) dalam 750px, bukan a yang ditanda dalam gambar.

Pada masa ini, kami sangat kagum dengan pereka bentuk Windows Reka bentuk bar skrol sangat cantik sehingga memperdayakan ramai pengendali tetikus yang berfikiran mudah. Jarak antara a dan b masing-masing mengenal pasti jarak bar skrol telah ditatal dan jarak yang perlu ditatal Terdapat hubungan yang sepadan antara mereka, tetapi ini tidak dipertimbangkan oleh pengaturcara seperti kami yang membangunkan aplikasi reka bentuk antara muka grafik GUI bagi ahli sistem pengendalian.

2 Tentukan sama ada bar skrol menegak mencapai bahagian bawah

Selepas menjelaskan konsep di atas, pengekodan sebenarnya agak mudah kod sampel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>下拉滚动条滚到底部了吗？</title>
   <script language="JavaScript" src="jQuery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
   <script language="javascript">
   $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();
 
    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
   });
   </script>
  <body>
  <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
   <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
  </div>
  </body>
  </html>

Salin selepas log masuk

Penjelasan kod:

Ketinggian div dalam ialah 750 dan ketinggian div luar ialah 500, jadi bar skrol menegak perlu tatal 750-500=250 jarak, ia akan sampai ke bawah, lihat kenyataan nScrollTop + nDivHight >= nScrollHight.

Dalam program, mengesan dan melaksanakan jika pernyataan penghakiman dalam acara tatal div luaran menggunakan banyak sumber CPU. Gunakan tetikus untuk menyeret bar skrol, dan acara ini akan dicetuskan selagi terdapat perubahan satu piksel. Tetapi dengan mengklik pada anak panah di kedua-dua hujung bar skrol, acara akan dicetuskan dengan lebih jarang. Oleh itu, acara skrol bar skrol harus digunakan dengan berhati-hati.

Contoh ini menilai keadaan apabila tiada bar skrol mendatar Apabila terdapat bar skrol mendatar, keadaan akan berubah sedikit, jadi dalam pernyataan nScrollTop + nDivHight >= nScrollHight, anda perlu menggunakan ". >=" Operator perbandingan, dan apabila tiada bar skrol mendatar, tanda sama "=" sudah memadai. Anda sebenarnya boleh mengujinya. Anda juga boleh menentukan sama ada bar skrol mendatar telah ditatal ke penghujung.

Di atas ialah kaedah yang ditulis dalam jquery untuk menentukan sama ada bar skrol div mencapai bahagian bawah [Disyorkan]_jquery kandungan Untuk kandungan yang lebih berkaitan, sila perhatikan tapak web PHP Cina (www.php .cn)!