JavaScript Academy · บทเรียน

การสังเกตการมองเห็นขององค์ประกอบ

สร้างตัวสังเกตและเฝ้าดูองค์ประกอบ

การสังเกตการมองเห็นขององค์ประกอบ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้ IntersectionObserver

แต่เดิม การตรวจจับว่าองค์ประกอบเข้าสู่พื้นที่แสดงผลเมื่อใดหมายถึงการรับฟัง scroll และเรียก getBoundingClientRect อย่างต่อเนื่อง ซึ่งทำงานช้าและกระตุก

ส่วนติดต่อโปรแกรม IntersectionObserver เฝ้าดูการมองเห็นได้อย่างมีประสิทธิภาพและแบบอะซิงโครนัส โดยไม่ทำงานบนเธรดหลัก

การสร้างตัวสังเกตการณ์

คุณสร้างตัวสังเกตการณ์ได้ด้วย new IntersectionObserver(callback) ฟังก์ชันเรียกกลับจะทำงานทุกครั้งที่การมองเห็นขององค์ประกอบที่เฝ้าดูข้ามเกณฑ์ที่กำหนด

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

การเฝ้าดูองค์ประกอบ

เรียก observer.observe(element) เพื่อเริ่มเฝ้าดูเป้าหมาย ตัวสังเกตการณ์หนึ่งตัวสามารถเฝ้าดูองค์ประกอบได้หลายรายการ

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

แฟล็ก isIntersecting

แต่ละรายการมีค่า boolean isIntersecting ซึ่งบอกว่าเป้าหมายกำลังทับซ้อนกับ root อยู่หรือไม่ (โดยค่าเริ่มต้นคือพื้นที่แสดงผล)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

รายละเอียดของรายการ

แต่ละรายการ IntersectionObserverEntry จะมีข้อมูลที่เป็นประโยชน์ดังนี้

target — องค์ประกอบที่กำลังเฝ้าดู
isIntersecting — ระบุว่ารายการนั้นตัดผ่าน root หรือไม่
intersectionRatio — สัดส่วนที่มองเห็น (ตั้งแต่ 0 ถึง 1)
boundingClientRect — สี่เหลี่ยมของเป้าหมาย

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

ตัวเลือกเกณฑ์

ตัวเลือก threshold ควบคุมว่าฟังก์ชันเรียกกลับจะทำงานที่อัตราส่วนการมองเห็นเท่าใด ค่า 0 จะทำงานทันทีที่มองเห็นแม้เพียงหนึ่งพิกเซล ส่วนค่า 1 จะทำงานเมื่อมองเห็นทั้งหมดเท่านั้น

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

ตัวเลือกพื้นที่ราก

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

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

ตัวเลือก rootMargin

rootMargin จะขยายหรือลดกรอบขอบเขตของพื้นที่รากในลักษณะเดียวกับระยะขอบ CSS ค่าบวกจะทำให้ฟังก์ชันเรียกกลับทำงานเร็วขึ้น ก่อนที่องค์ประกอบจะปรากฏบนหน้าจอจริง

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

การหยุดการสังเกต

เรียกใช้ observer.unobserve(element) เพื่อหยุดติดตามองค์ประกอบหนึ่งรายการ หรือเรียกใช้ observer.disconnect() เพื่อหยุดติดตามองค์ประกอบทั้งหมด การทำเช่นนี้สำคัญต่อการเก็บกวาดทรัพยากรและการทำงานแบบเรียกครั้งเดียว

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

เหตุผลที่มีประสิทธิภาพ

เบราว์เซอร์จะคำนวณการตัดกันภายในและรวมการแจ้งเตือนเป็นชุด แทนที่จะเรียกใช้ JavaScript ของคุณในทุกเฟรมที่เลื่อน วิธีนี้ช่วยหลีกเลี่ยงการคำนวณเค้าโครงซ้ำซ้อน และทำให้การเลื่อนราบรื่นแม้มีเป้าหมายจำนวนมาก

กรณีใช้งานทั่วไป

ตัวสังเกตการตัดกันช่วยขับเคลื่อนฟีเจอร์ที่ใช้งานจริงมากมาย:

การโหลดรูปภาพและเฟรมในหน้าเว็บเมื่อจำเป็น
การเลื่อนแบบไม่สิ้นสุด
ภาพเคลื่อนไหวที่ทำงานเมื่อเลื่อน
การติดตามการแสดงโฆษณาหรือเนื้อหา

ถัดไป เราจะสร้างฟีเจอร์เหล่านี้หลายรายการ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจพื้นฐานของตัวสังเกตการตัดกัน

สรุปทบทวน

คุณได้เรียนรู้พื้นฐานของตัวสังเกตการตัดกัน:

new IntersectionObserver(callback, options) ใช้สร้างตัวสังเกตการณ์
observe เริ่มติดตาม ส่วน unobserve/disconnect ใช้หยุดการติดตาม
แต่ละรายการจะแสดง isIntersecting และ intersectionRatio
threshold, root และ rootMargin ใช้ปรับช่วงเวลาที่ตัวสังเกตการณ์ทำงาน
มีประสิทธิภาพมากกว่าตัวรับฟังการเลื่อนอย่างมาก

ถัดไป เราจะใช้สิ่งนี้โหลดรูปภาพเมื่อจำเป็น

คำถามที่พบบ่อย

บทเรียน “การสังเกตการมองเห็นขององค์ประกอบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสังเกตการมองเห็นขององค์ประกอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสังเกตการมองเห็นขององค์ประกอบ”

สร้างตัวสังเกตและเฝ้าดูองค์ประกอบ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การสังเกตการมองเห็นขององค์ประกอบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy