การใช้งานการเลื่อนแบบไม่สิ้นสุด
โหลดเนื้อหาเพิ่มเติมโดยอัตโนมัติขณะที่ผู้ใช้เลื่อน
การใช้งานการเลื่อนแบบไม่สิ้นสุด เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
รูปแบบการทำงาน
การเลื่อนหน้าแบบไม่รู้จบจะโหลดเนื้อหาเพิ่มเติมเมื่อผู้ใช้เข้าใกล้ท้ายรายการ วิธีที่สะอาดที่สุดคือใช้ IntersectionObserver: วางองค์ประกอบ "sentinel" ไว้ท้ายรายการแล้วสังเกตองค์ประกอบนั้น เมื่อ sentinel เข้าสู่วิวพอร์ต ให้ fetch page ถัดไป
องค์ประกอบ sentinel
เพิ่ม <div> ที่มองไม่เห็น (หรือตัวแทน "กำลังโหลด...") ต่อจากรายการสุดท้าย สังเกตองค์ประกอบนี้ด้วย IntersectionObserver เมื่อเกิดการตัดกัน นั่นหมายความว่าผู้ใช้เลื่อนมาใกล้ท้ายรายการแล้ว จึงถึงเวลาที่จะดึงข้อมูลเพิ่มเติม
<ul id="feed">
<li>Post 1</li>
<li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>วงจรของตัวสังเกต
เมื่อเกิดการตัดกัน ให้ fetch page ถัดไป แสดงผลรายการใหม่ และจัดตำแหน่ง sentinel ใหม่ (sentinel จะอยู่ท้ายรายการโดยอัตโนมัติ หากเพิ่มรายการไว้ก่อนหน้านั้น) ไม่จำเป็นต้องเรียก unobserve แล้ว observe ซ้ำ เพราะ sentinel ยังคงถูกสังเกตอยู่
const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
if (!entries[0].isIntersecting || loading) return;
loading = true;
const items = await fetchPage(page++);
items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
loading = false;
});
observer.observe(sentinel);ตัวป้องกันสถานะการโหลด
แฟล็กบูลีน loading ป้องกันการส่งคำขอซ้อนกัน หากผู้ใช้เลื่อนอย่างรวดเร็วและทำให้เกิดการตัดกันหลายครั้งก่อนที่การตอบกลับครั้งแรกจะมาถึง หากไม่มีแฟล็กนี้ page เดิมจะถูกดึงซ้ำ และรายการจะแสดงซ้ำกัน
สิ้นสุดข้อมูล
เมื่อเซิร์ฟเวอร์ส่ง page ว่างกลับมา (หรือแจ้งว่า "ไม่มีข้อมูลเพิ่มเติม") ให้เรียก unobserve กับ sentinel แล้วแทนที่ด้วยข้อความแจ้งว่าสิ้นสุดรายการ การตัดกันในอนาคตจะไม่เรียก fetch อีก และผู้ใช้จะทราบว่าเลื่อนมาถึงท้ายสุดแล้ว
การจัดการข้อผิดพลาด
ห่อการเรียก fetch ไว้ใน try/catch เมื่อเกิดข้อผิดพลาด ให้คงค่า loading = true ไว้เพื่อไม่ให้การลองใหม่ทำงานโดยอัตโนมัติ และแสดงปุ่ม "ลองใหม่" ที่รีเซ็ตค่า loading แล้วเรียกโหลดอีกครั้ง หากไม่ทำเช่นนี้ ความล้มเหลวของเครือข่ายจะทำให้เกิดการลองซ้ำถี่เกินไป
rootMargin สำหรับการโหลดล่วงหน้า
rootMargin: "500px" จะเริ่ม fetch ครั้งถัดไปก่อนที่ผู้ใช้จะถึง sentinel 500 พิกเซล ปรับค่าตามความสูงของรายการและความเร็วการเลื่อนโดยเฉลี่ย หากน้อยเกินไป ผู้ใช้จะเจอข้อความ "ยังไม่มีเนื้อหา" หากมากเกินไป ก็จะดึงข้อมูลล่วงหน้าเกินความจำเป็น
การคืนตำแหน่งการเลื่อน
เมื่อผู้ใช้ออกจากหน้าแล้วกลับมา ตำแหน่งการเลื่อนควรถูกเก็บไว้ และรายการที่โหลดไว้ก่อนหน้านี้ควรถูกแสดงผลใหม่ด้วย AND รายการใน sessionStorage หรือร้านค้าแบบ Zustand แล้วคืนค่ารายการเมื่อเมาท์ พร้อมใช้ scrollTo ไปยังออฟเซ็ตที่จำไว้
ข้อควรพิจารณาด้านหน่วยความจำ
การเลื่อนหน้าแบบไม่รู้จบเป็นเวลานานจะสะสมโหนด DOM หลายพันรายการ สำหรับฟีดที่ยาวมาก เช่น Twitter หรือ Facebook ให้ใช้การจำกัดโหนดตามหน้าต่างการแสดงผลร่วมด้วย โดยนำรายการที่อยู่เหนือวิวพอร์ตออกจาก DOM และคืนรายการเหล่านั้นเมื่อเลื่อนกลับขึ้น ไลบรารีอย่าง react-virtual หรือ @tanstack/virtual จัดการเรื่องนี้ได้อย่างมีประสิทธิภาพ
การเข้าถึงได้
การเลื่อนหน้าแบบไม่รู้จบสร้างอุปสรรคให้ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ ซึ่งเข้าถึงส่วนท้ายของหน้าได้ยาก ควรมีปุ่ม "โหลดเพิ่ม" เป็นทางเลือกสำรอง และตรวจสอบว่าหน้ามีส่วนท้ายจริงที่เข้าถึงได้ด้วยปุ่ม Home/End นอกจากนี้ ภูมิภาคประกาศ Aria-live ที่แจ้งรายการใหม่ก็ช่วยได้เช่นกัน
การเลื่อนเด้งบนอุปกรณ์เคลื่อนที่
การเลื่อนเด้งของ iOS อาจทำให้เกิดการตัดกันหลายครั้งเมื่ออยู่ใกล้ท้ายหน้า ตัวป้องกันการโหลดจัดการกรณีส่วนใหญ่ได้ และคุณอาจหน่วงเวลา 300 มิลลิวินาทีเพื่อกรองการตัดกันที่เกิดถี่เป็นชุดระหว่างการเด้ง
ทางเลือก: การแบ่งหน้าแบบเคอร์เซอร์
ส่วนเชื่อมต่อโปรแกรมของเซิร์ฟเวอร์ควรส่งคืน "เคอร์เซอร์ถัดไป" แทนการพึ่งหมายเลข page ที่ฝั่งไคลเอนต์ติดตาม เพราะทนทานต่อการเพิ่มหรือลบรายการระหว่างการเลื่อน ฝั่งไคลเอนต์จะส่งเคอร์เซอร์ไปกับทุกคำขอ และหยุดเมื่อเซิร์ฟเวอร์ไม่ส่งเคอร์เซอร์กลับมา
ตรวจสอบความรู้
เหตุใดจึงจำเป็นต้องมีตัวบ่งชี้การโหลดในฟังก์ชันเรียกกลับของ IntersectionObserver สำหรับการเลื่อนแบบไม่สิ้นสุด
สรุป
การเลื่อนแบบไม่สิ้นสุดใช้ IntersectionObserver กับองค์ประกอบตัวเฝ้าดูที่อยู่ท้ายรายการ เมื่อองค์ประกอบเข้าสู่พื้นที่ที่เฝ้าดู ให้ดึงข้อมูลหน้าถัดไป แสดงผล แล้วเฝ้าดูต่อไป ป้องกันการทำงานซ้ำด้วยตัวบ่งชี้การโหลด จัดการกรณีข้อมูลหมดและข้อผิดพลาดอย่างเหมาะสม ปรับ rootMargin เพื่อกำหนดระยะดึงข้อมูลล่วงหน้า จัดเตรียมทางเลือกสำหรับแป้นพิมพ์ (ปุ่มโหลดเพิ่มเติม) และพิจารณาการแสดงผลเป็นช่วงสำหรับฟีดที่ยาวมาก
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “การใช้งานการเลื่อนแบบไม่สิ้นสุด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การใช้งานการเลื่อนแบบไม่สิ้นสุด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การใช้งานการเลื่อนแบบไม่สิ้นสุด”
โหลดเนื้อหาเพิ่มเติมโดยอัตโนมัติขณะที่ผู้ใช้เลื่อน คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การใช้งานการเลื่อนแบบไม่สิ้นสุด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- IntersectionObserver API และค่าเกณฑ์
- การโหลดแบบขี้เกียจด้วย IntersectionObserver
- การใช้งานการเลื่อนแบบไม่สิ้นสุด
- การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน