Cách kiểm tra phần tử DOM có trong vùng nhìn thấy hay không?

Giới thiệu

Trong phát triển web, việc xác định xem một phần tử DOM có nằm trong vùng nhìn thấy (viewport) hay không là rất quan trọng. Điều này không chỉ giúp cải thiện hiệu suất của trang web mà còn nâng cao trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách sử dụng các phương pháp khác nhau để xác định sự hiện diện của phần tử trong vùng nhìn thấy, bao gồm việc sử dụng getBoundingClientRect() và Intersection Observer API.

Nội dung chính

1. Sự khác biệt giữa viewport và DOM Layout

• Viewport: Là khu vực hiển thị nội dung của trình duyệt, kích thước của viewport có thể thay đổi tùy theo kích thước cửa sổ.
• DOM Layout: Là cách mà trình duyệt tổ chức các phần tử trong trang, bao gồm vị trí và kích thước của chúng.

2. Các thuộc tính kích thước quan trọng

• width: Chiều rộng của phần tử.
• innerWidth: Chiều rộng của viewport (sử dụng window.innerWidth).
• clientWidth: Chiều rộng bên trong của một phần tử, bao gồm padding nhưng không bao gồm border và scrollbar.
• offsetWidth: Chiều rộng của một phần tử bao gồm padding, border và scrollbar.
• scrollWidth: Chiều rộng của nội dung bên trong một phần tử có thể cuộn.

3. Sử dụng getBoundingClientRect()

getBoundingClientRect() là một phương thức của DOM trả về một đối tượng DOMRect chứa vị trí của phần tử tương đối với góc trên bên trái của viewport. Phương thức này giúp loại bỏ nhu cầu tính toán thủ công các giá trị offset, từ đó đơn giản hóa việc tính toán.

Điều kiện kiểm tra (Ví dụ về hiển thị theo chiều dọc)

• Hiển thị một phần: rect.top < window.innerHeight && rect.bottom > 0
• Hiển thị hoàn toàn: rect.top >= 0 && rect.bottom <= window.innerHeight

Ví dụ mã

function isInViewport(elem) {
  const rect = elem.getBoundingClientRect();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // Kiểm tra hiển thị một phần (theo chiều dọc và chiều ngang)
  return (
    rect.top < viewportHeight && 
    rect.bottom > 0 && 
    rect.left < viewportWidth && 
    rect.right > 0
  );
}

// Tối ưu hóa: Thêm throttling vào sự kiện cuộn (tránh tính toán quá thường xuyên)
function throttle(fn, delay = 100) {
  let lastTime = 0;
  return () => {
    const now = Date.now();
    if (now - lastTime > delay) {
      fn();
      lastTime = now;
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  const target = document.getElementById('target');
  if (isInViewport(target)) {
    target.style.backgroundColor = 'red';
  }
}));

4. Sử dụng Intersection Observer API

Intersection Observer là một API quan sát không đồng bộ do trình duyệt cung cấp, được thiết kế để phát hiện trạng thái giao nhau giữa một "phần tử mục tiêu" và một "phần tử gốc" (mặc định là viewport). Nó loại bỏ việc tính toán vị trí thủ công trong các sự kiện cuộn và cung cấp hiệu suất tuyệt vời.

Ví dụ mã (Sử dụng cơ bản: Phát hiện viewport)

// 1. Tạo một instance của Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Phần tử đã vào viewport', entry.target);
      // Tùy chọn: Dừng quan sát (ví dụ: cho hình ảnh lazy loading, chỉ cần một lần phát hiện)
      observer.unobserve(entry.target);
    } else {
      console.log('Phần tử đã rời khỏi viewport', entry.target);
    }
  });
}, {
  rootMargin: '100px 0px',
  threshold: 0.1
});

// 2. Quan sát phần tử mục tiêu
const target = document.getElementById('target');
observer.observe(target);

// 3. (Tùy chọn) Dừng quan sát tất cả các phần tử (ví dụ: khi một component bị hủy)
// observer.disconnect();

Sử dụng nâng cao: Quan sát một Container cuộn tùy chỉnh

Để phát hiện nếu một phần tử nằm trong một container cuộn tùy chỉnh (thay vì viewport), hãy đặt phần tử gốc là phần tử container:

const scrollContainer = document.getElementById('scroll-container');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Phần tử đã vào viewport của container cuộn');
    }
  });
}, {
  root: scrollContainer,
  rootMargin: '0px',
  threshold: 1
});

5. Ưu điểm và Nhược điểm của Intersection Observer API

Thực hành tốt nhất

• Sử dụng Intersection Observer API cho các tác vụ như lazy loading và theo dõi hiệu suất.
• Tránh sử dụng các sự kiện cuộn mà không có throttling hoặc debouncing để cải thiện hiệu suất.

Những cạm bẫy thường gặp

• Không kiểm tra xem Intersection Observer có hỗ trợ trên trình duyệt hay không.
• Quá nhiều phần tử được quan sát có thể làm giảm hiệu suất.

Mẹo hiệu suất

• Sử dụng rootMargin để điều chỉnh thời điểm phát hiện. Ví dụ, phát hiện sớm có thể giúp tải trước nội dung.
• Dừng quan sát các phần tử không còn cần thiết để tiết kiệm tài nguyên.

Kết luận

Việc xác định sự hiện diện của phần tử trong vùng nhìn thấy là một kỹ năng quan trọng trong phát triển web. Sử dụng các phương pháp như getBoundingClientRect() và Intersection Observer API không chỉ giúp tối ưu hóa hiệu suất mà còn cải thiện trải nghiệm người dùng. Hãy thử áp dụng những kỹ thuật này vào dự án của bạn ngay hôm nay!

Câu hỏi thường gặp (FAQ)

1. getBoundingClientRect() có hoạt động trên tất cả các trình duyệt không?

Có, nhưng hãy kiểm tra tính tương thích trước khi sử dụng.

2. Khi nào nên sử dụng Intersection Observer thay vì getBoundingClientRect()?

Sử dụng Intersection Observer khi bạn cần theo dõi nhiều phần tử và muốn tránh các tính toán thủ công phức tạp.

3. Có cách nào khác để kiểm tra phần tử trong viewport không?

Có, bạn có thể sử dụng các thư viện bên thứ ba hoặc các phương pháp khác, nhưng Intersection Observer là phương pháp hiện đại và hiệu quả nhất hiện nay.

Tài nguyên tham khảo

• MDN Web Docs - getBoundingClientRect()
• MDN Web Docs - Intersection Observer API

Hãy bắt đầu áp dụng những kiến thức này vào công việc của bạn ngay hôm nay!