Analisis ringkas tentang cara jquery menentukan bahawa bar skrol telah menatal ke bahagian bawah halaman dan melaksanakan event_jquery

Artikel ini memperkenalkan kepada pengaturcara bagaimana jquery menentukan apabila bar skrol telah sampai ke bahagian bawah halaman dan melaksanakan acara tersebut. Mula-mula fahami tiga elemen dom, iaitu: clientHeight, offsetHeight dan scrollTop.

Mula-mula fahami tiga elemen dom, iaitu: clientHeight, offsetHeight dan scrollTop.

clientHeight: Ketinggian elemen ini menduduki ketinggian keseluruhan ruang Oleh itu, jika div mempunyai bar skrol, ketinggian tidak termasuk bar skrol dan adalah tidak dipaparkan kandungan di bawah. Ia hanya ketinggian DIV.

offsetHeight: merujuk kepada ketinggian kandungan elemen. Menurut di atas, ketinggian ini ialah ketinggian di dalam DIV, termasuk bahagian yang kelihatan dan bahagian yang tidak kelihatan di bawah bar skrol.

scrollTop: Apakah ini? Ia boleh difahami sebagai panjang yang boleh ditatal oleh bar skrol.

Sebagai contoh, jika ketinggian DIV ialah 400px (iaitu, clientHeight ialah 400), dan kandungan di dalamnya ialah senarai panjang, ketinggian kandungan ialah 1000px (iaitu, offsetHeight ialah 1000). Jadi, kita melihat 400px dalam bahagian yang boleh dilihat, dan masih terdapat 600px yang tidak kelihatan dalam kandungan 1000px. Bagi bahagian yang tidak kelihatan ini, kita boleh memaparkan bahagian ini dengan menarik bar skrol. Jika bar skrol tidak ditarik, skrolTop ialah 0 pada masa ini Jika anda menarik bar skrol ke bawah dan bahagian bawah senarai dipaparkan, skrolTop ialah 600. Jadi julat nilai scrollTop ialah [0, 600]. Jadi 600 ini boleh difahami sebagai panjang yang boleh ditatal oleh bar skrol.

Setelah memahami konsep di atas. Sangat mudah untuk menentukan sama ada untuk menatal ke bawah.

Mula-mula, kami menarik bar skrol dari atas ke bawah. Apa yang berubah ialah nilai scrollTop, dan nilai ini mempunyai julat.
Selang ini ialah: [0, (offsetHeight - clientHeight)]
Iaitu, perubahan dalam keseluruhan proses penarikan bar skrol berada dalam julat 0 hingga (offsetHeight – clientHeight).

1 Tentukan sama ada bar skrol telah menatal ke bawah: scrollTop == (offsetHeight – clientHeight)
2. Dalam 50px dari bahagian bawah bar skrol: (offsetHeight – clientHeight) – scrollTop <= 50
3. Dalam 5% bahagian bawah bar skrol: scrollTop / (offsetHeight – clientHeight) >= 0.95

Sama seperti di atas.
Jika anda ingin menarik ke bawah untuk memuatkan kandungan secara automatik. Hanya daftarkan acara bar skrol:

scrollBottomTest =function(){
   $("#contain").scroll(function(){
     var $this =$(this),
     viewH =$(this).height(),//可见高度
     contentH =$(this).get(0).scrollHeight,//内容高度
     scrollTop =$(this).scrollTop();//滚动高度
    //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
    if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
    // 这里加载数据..
    }
   });
}

Artikel di atas menganalisis secara ringkas cara jquery menentukan apabila bar skrol telah menatal ke bahagian bawah halaman dan melaksanakan acara Ini adalah semua kandungan yang dikongsi oleh editor, saya harap ia boleh memberi anda rujukan anda akan lebih menyokong Script Home.