IntersectionObserver API และค่าเกณฑ์
สร้างตัวสังเกตการณ์และกำหนดค่าเกณฑ์การมองเห็น
IntersectionObserver API และค่าเกณฑ์ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
IntersectionObserver ทำอะไร
IntersectionObserver เรียกใช้ฟังก์ชันเรียกกลับเมื่อองค์ประกอบเข้าสู่หรือออกจากวิวพอร์ต (หรือพื้นที่เลื่อนอื่น) นี่คือทางเลือกสมัยใหม่ที่มีประสิทธิภาพเหนือกว่าตัวรับฟังการเลื่อน โดยเบราว์เซอร์จะคำนวณให้ และโค้ดของคุณจะทำงานเฉพาะเมื่อการมองเห็นเปลี่ยนแปลงจริงเท่านั้น
การสร้าง
new IntersectionObserver(callback, options) จะสร้างตัวสังเกต ฟังก์ชันเรียกกลับจะได้รับอาร์เรย์ของรายการเมื่อจุดตัดเปลี่ยนแปลง ส่วนตัวเลือกจะกำหนดว่าจะสังเกตพื้นที่ใดและที่เกณฑ์ใดบ้าง
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
แต่ละรายการมี target (องค์ประกอบที่กำลังสังเกต), isIntersecting (ค่าบูลีน), intersectionRatio (ตั้งแต่ 0 ถึง 1), boundingClientRect, intersectionRect และ time ใช้ isIntersecting สำหรับตรวจสอบการมองเห็นแบบมีหรือไม่มี และใช้ intersectionRatio สำหรับตรรกะที่อิงเปอร์เซ็นต์การมองเห็น
ตัวเลือกเกณฑ์
{ threshold: 0.5 } จะเรียกใช้ฟังก์ชันเรียกกลับทุกครั้งที่อัตราส่วนการตัดกันข้ามระดับ 50% ใช้อาร์เรย์ [0, 0.25, 0.5, 0.75, 1] เพื่อเรียกใช้ที่ทุกช่วงหนึ่งในสี่ เหมาะสำหรับสร้างตัวบ่งชี้ความคืบหน้าหรือการวิเคราะห์ที่รายงานว่า "มองเห็นกี่เปอร์เซ็นต์"
ตัวเลือกจุดอ้างอิง
โดยค่าเริ่มต้น ตัวสังเกตจะวัดการตัดกันกับวิวพอร์ต กำหนด root: someScrollableDiv เพื่อวัดเทียบกับพื้นที่เลื่อนด้านใน เช่น รายการเสมือนจริงภายใน div ที่มีความสูงคงที่
ตัวเลือกระยะขอบจุดอ้างอิง
rootMargin: "200px" จะขยายพื้นที่สังเกตออกด้านละ 200 พิกเซล ใช้เพื่อเรียกใช้ให้เร็วขึ้น (เริ่มโหลดรูปภาพก่อนเข้าวิวพอร์ต 200 พิกเซล) หรือให้ช้าลง (เรียกใช้เฉพาะเมื่อองค์ประกอบเลื่อนพ้นวิวพอร์ตทั้งหมดแล้ว)
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe และ unobserve
observer.observe(element) จะเริ่มเฝ้าดูองค์ประกอบ ส่วน observer.unobserve(element) จะหยุดเฝ้าดู โปรดเรียก unobserve เสมอเมื่อไม่ต้องการฟังก์ชันเรียกกลับอีกต่อไป (เช่น หลังจากเริ่มโหลดแบบขี้เกียจสำเร็จครั้งหนึ่งแล้ว) เพื่อคืนหน่วยความจำ
disconnect
observer.disconnect() จะหยุดเฝ้าดูองค์ประกอบทั้งหมดที่กำลังสังเกตอยู่ ให้เรียกใช้เมื่อถอดคอมโพเนนต์ออกหรือไม่ต้องการตัวสังเกตอีกต่อไป เพื่อป้องกันหน่วยความจำรั่วจากตัวสังเกตที่ทำงานต่อหลังหมดอายุการใช้งาน
การส่งมอบแบบอะซิงโครนัส
ฟังก์ชันเรียกกลับจะถูกส่งมอบแบบอะซิงโครนัสและรวมเป็นชุด การเปลี่ยนแปลงจุดตัดจำนวนมากระหว่างการเลื่อนอย่างรวดเร็วจะเรียกใช้ฟังก์ชันเรียกกลับหนึ่งครั้งพร้อมรายการทั้งหมด ไม่ใช่เรียกครั้งละองค์ประกอบ นี่เป็นข้อได้เปรียบด้านประสิทธิภาพอย่างมากเมื่อเทียบกับตัวรับฟังการเลื่อนที่ทำงานทุกเหตุการณ์การเลื่อน
ฟังก์ชันเรียกกลับเริ่มทำงานทันที
เมื่อคุณเริ่มสังเกตองค์ประกอบใหม่ ฟังก์ชันเรียกกลับจะทำงานหนึ่งครั้งเกือบจะทันทีพร้อมสถานะปัจจุบัน เหมาะสำหรับจัดการองค์ประกอบที่มองเห็นอยู่แล้วเมื่อเริ่มสังเกต โดยไม่ต้องมีขั้นตอนเริ่มต้นพิเศษ
กรณีใช้งานทั่วไป
การโหลดรูปภาพแบบขี้เกียจ การเรียกใช้แอนิเมชันเมื่อเลื่อนเข้ามาในวิวพอร์ต การเลื่อนหน้าแบบไม่รู้จบ (สังเกต sentinel ใกล้ท้ายรายการ) การติดตามว่าผู้ใช้อ่านบทความใดจริง และการสลับส่วนหัวแบบติดด้านบนตามการมองเห็นส่วนฮีโร่
ตรวจสอบความรู้
threshold: 0 และ threshold: 1 ใน IntersectionObserver แตกต่างกันอย่างไร
สรุป
IntersectionObserver เรียกใช้ฟังก์ชันเรียกกลับเมื่อการมองเห็นองค์ประกอบเปลี่ยนแปลง พร้อมการเพิ่มประสิทธิภาพและการรวมงานเป็นชุดในตัว จึงควรใช้แทนตัวรับฟังการเลื่อนสำหรับตรรกะด้านการมองเห็น ตั้งค่าด้วยเกณฑ์ (ตั้งแต่ 0 ถึง 1 หรือใช้อาร์เรย์) จุดอ้างอิง (พื้นที่เลื่อนแบบกำหนดเอง) และระยะขอบจุดอ้างอิง (ขยายหรือลดพื้นที่ที่สังเกต) ใช้ observe/unobserve กับองค์ประกอบเฉพาะรายการ และใช้ disconnect เพื่อล้างทั้งหมด
คำถามที่พบบ่อย
บทเรียน “IntersectionObserver API และค่าเกณฑ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “IntersectionObserver API และค่าเกณฑ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “IntersectionObserver API และค่าเกณฑ์”
สร้างตัวสังเกตการณ์และกำหนดค่าเกณฑ์การมองเห็น คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “IntersectionObserver API และค่าเกณฑ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- IntersectionObserver API และค่าเกณฑ์
- การโหลดแบบขี้เกียจด้วย IntersectionObserver
- การใช้งานการเลื่อนแบบไม่สิ้นสุด
- การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน