วิธีตรวจจับเมื่อผู้ใช้เลื่อนลงถึงด้านล่างหน้าเว็บด้วย JavaScript

เรียนรู้วิธีตรวจจับเมื่อผู้ใช้เลื่อนลงมาที่ด้านล่างของหน้าเว็บด้วย JavaScript แบบดิบ

บางครั้งคุณต้องการทริกเกอร์เหตุการณ์ เมื่อผู้ใช้เลื่อนลงมาถึงด้านล่างของหน้าหรือส่วนเฉพาะ

ตรวจจับการเลื่อนถึงด้านล่าง (ทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมด IE9 ขึ้นไป)

window.onscroll = function() { if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) { alert("At the bottom!") } }

แก้ไขกรณีขอบ (Edge case):

ถ้าวิธีแรกไม่ได้ผล ลองใช้เมธอด Math.ceil() บน window.pageYOffset:

window.onscroll = function() { if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) { alert('At the bottom!') } }

เหตุผลที่ใช้ Math.ceil คือบางเบราว์เซอร์ใช้ความแม่นยำ subpixel บนอิลีเมนต์ เช่น ความกว้างหรือสูงอาจเป็น 500.25px

Math.ceil จะปัดขึ้น เช่น 1.45px กลายเป็น 2px

ยังมีปัญหากับบางเครื่อง Mac ที่ควบคุมความสูงหน้าต่างเพิ่ม 1px วิธีแก้คือลบพิกเซลนิดหน่อยจากความสูงเอกสาร:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

หมายเหตุ: scrollY มักใช้แทน pageYOffset แต่ scrollY ไม่ทำงานใน Internet Explorer สำหรับความเข้ากันได้ข้ามเบราว์เซอร์สมัยใหม่ ใช้ pageYOffset

นี่คือ CodePen แสดงตัวอย่างที่ทำงาน

หากคุณสับสนเกี่ยวกับความสัมพันธ์ระหว่าง window.innerHeight, window.pageYOffset, และ document.body.offsetHeight นี่คือฟังก์ชันช่วยที่บันทึกค่าพิกเซลของแต่ละอย่างเมื่อคุณเลื่อน:

window.onscroll = function() { console.log('Window height (px):', window.innerHeight) console.log('Currently scrolled from top (px):', window.pageYOffset) console.log('Document height(px):', document.body.offsetHeight) }

นี่ควรช่วยให้เข้าใจง่ายขึ้นว่าฟังก์ชันตรวจจับการเลื่อนทำงานอย่างไร เริ่มต้น pageYOffset ทำให้ผมสับสน มันหมายถึงจำนวนพิกเซล ปัจจุบัน ที่เลื่อนแนวตั้งจากด้านบน