สร้างจุดสิ้นสุดการเลื่อน JavaScript

มีปลั๊กอินมากมายให้ใช้งานแบบออนไลน์เพื่อใช้การโหลดแบบขี้เกียจในหน้าเว็บ แต่จะทริกเกอร์ฟังก์ชันการโทรกลับหลังจากเลื่อนหน้าเว็บจำนวนหนึ่งเท่านั้น เราจะเรียกฟังก์ชันโทรกลับของเราได้อย่างไรเมื่อแถบเลื่อนมาถึงท้ายหน้า ปลั๊กอินดังกล่าวอาจมีให้บริการทางออนไลน์ แต่ฉันไม่รู้จักพวกเขา และฉันมักจะชอบสร้างบางสิ่งตั้งแต่เริ่มต้น ลองสร้างจุดสิ้นสุดการเลื่อนของเราเอง

1. ก่อนอื่นให้สร้างไฟล์ HTML (index.html) และไฟล์ js (script.js)

2. ตอนนี้วาง CSS ที่กำหนดในแท็ก 'ส่วนหัว' ของไฟล์ HTML และเชื่อมโยงไฟล์ js กับ HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll ending point with JavaScript</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }

      body{
        height: 200vh;
      }
    </style>
  </head>

  <body>

    <script src="script.js"></script>
  </body>
</html>

const selector = el=>document.querySelector(el);
const body = selector('body');

4. ตอนนี้ได้เวลาสร้างเหตุการณ์การเลื่อน รหัสของเหตุการณ์การเลื่อนจะได้รับด้านล่าง -

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y;
  if(scrollLimitLeft===0)console.log('End of the scroll');
});

5. เราบรรลุสิ่งที่ต้องการแล้ว และตอนนี้โค้ดของเรายังทำงานได้อย่างราบรื่น แต่มีข้อบกพร่องเล็ก ๆ น้อย ๆ ซ่อนอยู่ในรหัสของเรา โค้ดของเราจะหยุดทำงานหากเราลบโค้ดรีเซ็ต CSS ( *{margin: 0; padding: 0;} ) ออกจากไฟล์ HTML หากคุณเห็นค่าของตัวแปร “ scrollLimitLeft”ที่กำลังเลื่อนอยู่ที่ด้านล่างของหน้า ค่าจะเป็น -16 (ค่าอาจแตกต่างกันไปในเบราว์เซอร์ที่แตกต่างกัน) คุณอาจอารมณ์เสียเหมือนฉันคิดว่าโค้ด js ของเราจะทำงานบนพื้นฐานของการมีอยู่ของโค้ด CSS หนึ่งบรรทัด แต่อย่ากังวล อ่านต่อไปและคุณจะได้คำตอบ

6. ก่อนอื่นเราต้องรู้ว่าเหตุใดสิ่งนี้จึงเกิดขึ้น จริงๆ แล้ว HTML มีระยะขอบเริ่มต้นในแท็ก "body" และสร้างพื้นที่เพิ่มเติมเพื่อเลื่อน ด้วยเหตุนี้ เราจึงได้ผลลัพธ์เชิงลบแทนที่จะเป็น '0' ที่ด้านล่างของหน้า ดังนั้นเราจึงจำเป็นต้องลบระยะขอบพิเศษออกจาก “ scrollLimitLeft ” เพื่อให้โค้ดของเรากลับมาใช้งานได้ ลองหา Margin พิเศษกัน

7. เขียนรหัสที่กำหนดต่อจากรหัสของส่วนที่ 3

const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

คุณคิดอย่างไรเกี่ยวกับโครงการเล็ก ๆ นี้ หากคุณชอบมัน โปรดตบมือและหากคุณพบข้อผิดพลาดในโครงการหรือมีข้อเสนอแนะใด ๆ เกี่ยวกับเรื่องนี้ โปรดแจ้งให้เราทราบในส่วนความคิดเห็น