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

 2,318 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 29/05/2019

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 ในการ ดึงข้อมูลเพิ่มได้เลย
}
});

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


ถ้าชอบบทความนี้ กด Like เลย :Jquery ตัวอย่าง การจับตำแหน่ง scrollTop เพื่อ Load Data เพิ่มเมื่อเลื่อนจนถึงล่างสุด
TAGS : Jquery   Javascript   Programming   โปรแกรมมิ่ง  
 2,318 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 29/05/2019



SOA,Java,XSLT

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

#1.    Java
@ ถ้า $(window).scrollTop() คือจุดบนสุดของ scroll รวมกับจุดที่เรา scroll ไปแล้วด้วย
เมื่อนำมารวมกับ $(window).height() ซึ่งคือความสูงตายตัวของ screen ที่เรามองเห็น
ถ้ามันมีค่าเท่ากับ ความสูงของ content ทั้งหมด ก็แสดงว่าเราเลื่อนลงมาสุดแล้วครับ
งง มั้ย ??

...............................................



× แจ้งเตือน! เราสนับสนุนทุกความคิดเห็น ที่ ใช้ถ้อยคำสุภาพ ไม่ละเมิดผู้อื่น ไม่ก่อให้เกิดความขัดแย้ง

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

  SVN ติดปัญหา org apache subversion javahl ClientException The working copy needs to be upgraded ถามเมื่อ (2016-07-21)   1,553 views  (ดูล่าสุดเมื่อ 13 นาที)

  Unix ค้นหาว่าไฟล์ใหนมี คำนี้อยู่บ้าง โดยระบุ folder ด้วย find xargs grep ถามเมื่อ (2016-12-09)   1,793 views  (ดูล่าสุดเมื่อ 16 นาที)

  การเขียนเว็บ แบบ SPA หรือ Single Page Applications ทำอย่างไร ถามเมื่อ (2015-09-21)   2,396 views  (ดูล่าสุดเมื่อ 30 นาที)

  ลืมรหัส ที่ตั้งพาสโคตลอค ทำไงดีคะ กดหลายครั้งละผิดตลอด ล่าสุดขุ้นว่าอีกชั่วโมงค่อยกดใหม่ เรยมะกล้าละ กัวลอค ถามเมื่อ (2013-06-26)   2,551 views  (ดูล่าสุดเมื่อ 35 นาที)

  ปัญหา ภ กับ utf 8 ใน PHP กับ MySQL ถามเมื่อ (2012-08-11)   2,819 views  (ดูล่าสุดเมื่อ 53 นาที)

  Print BarCode ด้วย PHP ง่ายๆ ด้วย Free Barcode Font ถามเมื่อ (2012-07-04)   2,766 views  (ดูล่าสุดเมื่อ 64 นาที)

  วิธี Call Stored Procedure ใน PL SQL ถามเมื่อ (2013-01-24)   3,496 views  (ดูล่าสุดเมื่อ 65 นาที)

  CodePro สุดยอด tools แห่ง code coverage ถามเมื่อ (2013-07-12)   2,509 views  (ดูล่าสุดเมื่อ 67 นาที)

  PLSQL select into แบบ Dynamic SQL ด้วย bind variable ถามเมื่อ (2017-03-03)   2,514 views  (ดูล่าสุดเมื่อ 79 นาที)

  jQuery กำหนดให้รอ response จาก AJAX ด้วย option async ถามเมื่อ (2019-06-01)   1,751 views  (ดูล่าสุดเมื่อ 83 นาที)


 

บ้านเดียวกันดอทคอม เว็บถามตอบ รวมทุกเรื่องที่คุณอยากรู้ ให้ความรู้ ความบันเทิง มีสาระ
www.ban1gun.com