Triển khai infinite scroll bằng `IntersectionObserver` thế nào? `root`, `rootMargin`, `threshold` ảnh hưởng ra sao và có bẫy gì?

Đặt một phần tử sentinel ở cuối danh sách và quan sát nó; sentinel lọt vào tầm ngắm thì tải trang tiếp theo.

const io = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting && !loadingRef.current) loadMore()
  },
  { root: scrollBoxRef.current, rootMargin: '400px 0px', threshold: 0 },
)
io.observe(sentinelRef.current)

• root: khung tham chiếu. null = viewport; nếu danh sách cuộn trong một div có overflow: auto thì phải truyền chính div đó, không thì callback không bao giờ bắn.
• rootMargin: nới rộng vùng quan sát. 400px nghĩa là tải trước khi người dùng thật sự chạm đáy, giảm cảm giác chờ. Chỉ nhận đơn vị px/%, không nhận rem.
• threshold: tỉ lệ phần tử phải lộ ra để kích hoạt. Với sentinel mỏng thì 0 là đủ; với tracking hiển thị quảng cáo mới cần 0.5 hoặc mảng nhiều mốc.

Bẫy hay gặp:
- Bắn nhiều lần: sentinel còn trong tầm ngắm sau khi thêm item → phải có cờ loading hoặc unobserve trong lúc fetch.
- Sentinel cao 0px và không có nội dung có thể bị coi là không giao nhau; cho nó chiều cao tối thiểu.
- Callback chạy bất đồng bộ, gom theo batch, không phải mỗi pixel cuộn — đây chính là lý do nó nhẹ hơn nghe scroll.
- Nhớ io.disconnect() khi unmount, và tạo lại observer nếu root đổi.