كيفية تنفيذ التمرير اللانهائي باستخدام IntersectionObserver

<ul id="post-list">
  <!-- Items appended here dynamically -->
</ul>

<!-- The sentinel: observed by IntersectionObserver -->
<div id="scroll-sentinel" aria-hidden="true"></div>

<button id="load-more-btn" hidden>Load more</button>

const sentinel = document.getElementById('scroll-sentinel');

const observer = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadNextPage();
    }
  },
  {
    root: null,        // Observe relative to the browser viewport
    rootMargin: '200px', // Trigger 200px before the sentinel is visible
    threshold: 0,      // Fire as soon as any pixel enters the margin
  }
);

observer.observe(sentinel);

let currentPage = 1;
let loading = false;
let hasMore = true;

async function loadNextPage() {
  if (loading || !hasMore) return; // Guard against overlap and end-of-data
  loading = true;

  try {
    const items = await fetchPage(currentPage);

    if (items.length === 0) {
      hasMore = false;
      observer.unobserve(sentinel); // Stop watching — nothing left to load
      showEndMessage();
      return;
    }

    appendItems(items);
    currentPage++;
  } catch (err) {
    showError(err.message);
  } finally {
    loading = false;
  }
}

async function fetchPage(page) {
  const response = await fetch(`/api/posts?page=${page}&per_page=20`);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  // API returns { items: [...], total_pages: N }
  if (page >= data.total_pages) hasMore = false;
  return data.items;
}

function appendItems(items) {
  const list = document.getElementById('post-list');
  const fragment = document.createDocumentFragment();

  items.forEach((post) => {
    const li = document.createElement('li');
    li.className = 'post-item';

    const title = document.createElement('h3');
    title.textContent = post.title; // Safe — escapes HTML

    const excerpt = document.createElement('p');
    excerpt.textContent = post.excerpt;

    li.append(title, excerpt);
    fragment.appendChild(li);
  });

  list.appendChild(fragment); // One DOM mutation instead of N
}

function showEndMessage() {
  sentinel.hidden = true;

  const loadMoreBtn = document.getElementById('load-more-btn');
  loadMoreBtn.hidden = false;
  loadMoreBtn.textContent = 'You\'ve reached the end';
  loadMoreBtn.disabled = true;

  // Or: replace with a friendlier end-of-feed message
  const msg = document.createElement('p');
  msg.className = 'end-of-feed';
  msg.textContent = 'No more posts to load.';
  document.getElementById('post-list').after(msg);
}

const loadMoreBtn = document.getElementById('load-more-btn');

loadMoreBtn.addEventListener('click', () => {
  loadNextPage();
});

// During loading: update button text so users know something is happening
async function loadNextPage() {
  if (loading || !hasMore) return;
  loading = true;
  loadMoreBtn.textContent = 'Loading…';
  loadMoreBtn.disabled = true;

  try {
    // ... fetch and append logic
  } finally {
    loading = false;
    if (hasMore) {
      loadMoreBtn.textContent = 'Load more';
      loadMoreBtn.disabled = false;
    }
  }
}

// Entry point: load page 1 immediately, then let the observer take over
loadNextPage();