IntersectionObserver là gì? Vì sao hơn cách nghe sự kiện `scroll`?

IntersectionObserver là API trình duyệt theo dõi bất đồng bộ khi một phần tử giao (intersect) với viewport (hoặc một phần tử cha cuộn được), rồi gọi callback khi mức hiển thị vượt các ngưỡng (threshold) ta đặt.

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) { /* element entered view */ }
  })
}, { threshold: 0.1, rootMargin: '0px' })
io.observe(targetEl)

Vì sao hơn nghe scroll + getBoundingClientRect():
- Sự kiện scroll bắn rất dày, chạy trên main thread; mỗi lần gọi getBoundingClientRect() lại buộc reflow đồng bộ → dễ giật khung hình, phải tự debounce/throttle.
- IntersectionObserver được trình duyệt tính ngoài main thread, chỉ báo khi thật sự có thay đổi giao cắt → mượt và tiết kiệm hơn.

Ứng dụng điển hình: lazy-load ảnh/component, infinite scroll (nạp thêm khi chạm cuối danh sách), kích hoạt animation khi cuộn tới, đo hiển thị quảng cáo (impression). Cùng họ còn có ResizeObserver (theo dõi đổi kích thước) và MutationObserver (theo dõi đổi DOM).