IntersectionObserver สำหรับเอฟเฟกต์ที่ทำงานเมื่อเลื่อน

API IntersectionObserver ตรวจสอบอย่างมีประสิทธิภาพว่าองค์ประกอบหนึ่งรายการหรือหลายรายการเข้าสู่หรือออกจากพื้นที่แสดงผลของเบราว์เซอร์ (หรือองค์ประกอบบรรพบุรุษที่ระบุ) หรือไม่ ต่างจากตัวรับฟังการเลื่อนที่ทำงานทุกพิกเซล ตัวสังเกตการณ์จะเรียกฟังก์ชันเรียกกลับเฉพาะเมื่อองค์ประกอบข้ามค่าขีดแบ่ง จึงมีประสิทธิภาพมากกว่าสำหรับเอฟเฟกต์ที่อิงตามการเลื่อน

ฟังก์ชันเรียกกลับจะได้รับอาร์เรย์ของออบเจ็กต์ IntersectionObserverEntry โดยมีหนึ่งรายการต่อองค์ประกอบที่กำลังสังเกต แต่ละรายการมีค่าบูลีน isIntersecting (เป็นจริงเมื่อมองเห็น) และตัวเลข intersectionRatio ระหว่าง 0 ถึง 1 (สัดส่วนขององค์ประกอบที่มองเห็นอยู่ในขณะนั้น) ใช้ค่าเหล่านี้เพื่อกำหนดสถานะการมองเห็น

สร้างตัวสังเกตการณ์ภายใน useEffect แล้วเรียกใช้ observer.observe(ref.current) เพื่อเริ่มติดตามองค์ประกอบ ต้องผูก ref เข้ากับองค์ประกอบ DOM ที่ต้องการติดตาม สร้างตัวสังเกตการณ์หลังจากติดตั้งคอมโพเนนต์แล้ว เพื่อให้ ref.current มีค่า

ในฟังก์ชันล้างข้อมูลของ useEffect ให้เรียกใช้ observer.unobserve(element) เพื่อหยุดติดตามองค์ประกอบที่ระบุ หรือเรียกใช้ observer.disconnect() เพื่อหยุดการสังเกตทั้งหมด หากลืมล้างข้อมูล ตัวสังเกตการณ์จะยังคงอยู่หลังจากถอดคอมโพเนนต์ออก และอาจทำให้เกิดข้อผิดพลาดหรือการรั่วไหลของหน่วยความจำ

ตัวเลือก threshold ควบคุมเวลาที่ฟังก์ชันเรียกกลับจะทำงาน ค่า 0 จะทำงานทันทีที่มองเห็นพิกเซลใด ๆ ขององค์ประกอบ ส่วนค่า 1 จะทำงานเมื่อมองเห็นองค์ประกอบทั้งหมดเท่านั้น นอกจากนี้ยังส่งอาร์เรย์ เช่น [0, 0.5, 1] เพื่อรับฟังก์ชันเรียกกลับที่ระดับการมองเห็นหลายระดับได้

rootMargin ใช้ขยายหรือลดพื้นที่ตัดกันที่มีผล โดยใช้รูปแบบไวยากรณ์คล้าย CSS: '100px 0px' จะทำงานก่อนที่องค์ประกอบจะเข้าสู่พื้นที่แสดงผล 100px ใช้ '-100px' เพื่อให้ทำงานเมื่อองค์ประกอบอยู่ลึกเข้าไปในพื้นที่แสดงผล 100px เท่านั้น วิธีนี้มีประโยชน์สำหรับการโหลดล่วงหน้าหรือการทำภาพเคลื่อนไหวก่อนที่องค์ประกอบจะมองเห็นได้ทั้งหมด

หากต้องการโหลดรูปภาพเมื่อจำเป็น ให้กำหนดแอตทริบิวต์ data-src แทน src ในตอนแรก เมื่อระบบสังเกตการณ์ทำงานโดยมีค่า isIntersecting: true ให้คัดลอก data-src ไปยัง src เพื่อเริ่มคำขอเครือข่าย จากนั้นเรียกใช้ observer.unobserve(entry.target) เนื่องจากรูปภาพต้องโหลดเพียงครั้งเดียว

สำหรับภาพเคลื่อนไหวแบบค่อย ๆ ปรากฏ ให้เพิ่มคลาส CSS เมื่อ isIntersecting เปลี่ยนเป็น true: element.classList.add('visible') กำหนดการเปลี่ยนผ่านใน CSS ดังนี้: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } และ .card.visible { opacity: 1; transform: none; } ระบบสังเกตการณ์จะเรียกใช้ตัวกระตุ้นได้อย่างมีประสิทธิภาพ

IntersectionObserver เหมาะอย่างยิ่งสำหรับการติดตามการมองเห็น เมื่อองค์ประกอบที่มีแอตทริบิวต์ data-analytics-id เข้าสู่พื้นที่มองเห็นตามเกณฑ์ 0.5 ให้ส่งเหตุการณ์การวิเคราะห์ วิธีนี้วัดได้อย่างแม่นยำว่าส่วนใดของเนื้อหาที่ผู้ใช้อ่านจริง และเชื่อถือได้มากกว่าการใช้เปอร์เซ็นต์ความลึกของการเลื่อนแบบง่าย ๆ อย่างมาก

อินสแตนซ์ IntersectionObserver เดียวสามารถสังเกตองค์ประกอบหลายรายการได้ โดยเรียกใช้ observer.observe(element) กับแต่ละองค์ประกอบ องค์ประกอบที่สังเกตทั้งหมดจะใช้ฟังก์ชันเรียกกลับและตัวเลือกเดียวกัน ภายในฟังก์ชันเรียกกลับ ให้ใช้ entry.target เพื่อระบุว่าองค์ประกอบใดเป็นผู้กระตุ้นการแจ้งเตือน

ฮุก useInView ที่นำกลับมาใช้ใหม่ได้จะคืนค่า [ref, inView] ให้ผูก ref เข้ากับองค์ประกอบใดก็ได้ แล้วอ่านค่า inView เพื่อทราบว่าองค์ประกอบนั้นกำลังมองเห็นอยู่หรือไม่ ฮุกรับออบเจ็กต์ options สำหรับกำหนด threshold และ rootMargin แนวคิดนามธรรมนี้ทำให้เอฟเฟกต์จากการเลื่อนมีรูปแบบเชิงประกาศในทุกคอมโพเนนต์

IntersectionObserver ติดตามการมองเห็นขององค์ประกอบได้อย่างมีประสิทธิภาพโดยใช้ isIntersecting และ intersectionRatio ควรล้างการสังเกตเสมอด้วย unobserve หรือ disconnect ใช้ threshold เพื่อควบคุมจุดกระตุ้น และใช้ rootMargin เพื่อขยายพื้นที่ตรวจจับ นำไปใช้กับการโหลดเมื่อจำเป็น ภาพเคลื่อนไหว และการติดตามการวิเคราะห์