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

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

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

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

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

วิธีแก้ปัญหากรณีขอบ:

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

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

เหตุผลที่ใช้ Math.ceil คือเบราว์เซอร์บางตัวใช้ความละเอียดของพิกเซลย่อยในองค์ประกอบ เช่น. ความกว้างหรือความสูงได้ 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 ทำให้ฉันสับสน หมายถึงจำนวน ปัจจุบัน พิกเซลเลื่อนในแนวตั้งจากด้านบน