Jquery ตัวอย่าง การจับตำแหน่ง scrollTop เพื่อ Load Data เพิ่มเมื่อเลื่อนจนถึงล่างสุด|สำหรับโปรแกรมเมอร์

Jquery ตัวอย่าง การจับตำแหน่ง scrollTop เพื่อ Load Data เพิ่มเมื่อเลื่อนจนถึงล่างสุด

ตัวอย่าง Script เพื่อหาตำแหน่งของ scrollTop โดยใช้ jquery
var $height = $(window).scrollTop();
คำสั่งนี้จะได้ ตำแหน่งของ scrollTop ออกมาเป็นตัวเลข
หลังจากนั้นเราก็ใช้ $height ไปใช้ต่อ
ยกตัวอย่างถ้าเราต้องการ ตรวจสอบว่าเลื่อน Scroll ถึงตำแหน่งล่างสุดของ หน้าจอหรือยัง
เราจำเป็นต้องรู้ ค่าของตัวแปรต่างๆ ดังนี้

1. $(window).scrollTop() ตำแหน่งของ Scroll ด้านบน แทนค่าว่า A
2. $(window).height() ความสูงของหน้าจออันนี้จะคงที่เสมอ ตามขนาดของ Browser ต่อไปจะเรียกว่า B
3. $(document).height() ความสูงของ เอกสารทั้งหมดรวมส่วนที่เรายังไม่ได้ scroll ลงไปเด้วย ต่อไปจะเรียกว่า C

ถ้า A+B = C เมื่อไร นั่นคือตำแหน่งล่างสุดของหน้าจอ
เราสามารถเขียน code ได้ง่ายๆ ตามตัวอย่าง


$(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() == $(document).height()) {

       alert("ล่างสุดแล้วนะ");

       // เรียกใช้ function ในการ ดึงข้อมูลเพิ่มได้เลย

   }

});

ลองนำไปใช้กันดูนะครับ

Jquery ตัวอย่าง การจับตำแหน่ง scrollTop เพื่อ Load Data เพิ่มเมื่อเลื่อนจนถึงล่างสุด สร้างคำถาม

Jquery ตัวอย่าง การจับตำแหน่ง scrollTop เพื่อ Load Data เพิ่มเมื่อเลื่อนจนถึงล่างสุด

ร่วมแสดงความคิดเห็นได้ที่นี่

เนื้อหาที่เกี่ยวช้อง