How to Create Infinite Scroll in CSS and JavaScript

<!-- HTML Structure -->
<div id="content-container">
  <!-- Content items will be appended here -->
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>

  <!-- Sentinel element - observer watches this -->
  <div id="sentinel"></div>

  <!-- Loading indicator -->
  <div id="loading" class="hidden">
    <div class="spinner"></div>
    <span>Loading more...</span>
  </div>

  <!-- End message -->
  <div id="end-message" class="hidden">
    No more items to load
  </div>
</div>

/* CSS Styles */
#content-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.item {
  background: #f5f5f5;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 8px;
}

#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

#loading.hidden {
  display: none;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#end-message {
  text-align: center;
  padding: 20px;
  color: #666;
}

// Initialize Intersection Observer
const sentinel = document.getElementById('sentinel');

const observer = new IntersectionObserver((entries) => {
  // entries[0] is our sentinel element
  if (entries[0].isIntersecting) {
    loadMoreContent();
  }
}, {
  // Start loading 100px before sentinel is visible
  rootMargin: '100px',
  // Trigger when any part is visible
  threshold: 0
});

// Start observing
observer.observe(sentinel);

// Load more content function
let isLoading = false;
let currentPage = 1;

async function loadMoreContent() {
  // Prevent duplicate requests
  if (isLoading) return;

  isLoading = true;
  showLoading();

  try {
    // Fetch next page from your API
    const response = await fetch(`/api/items?page=${currentPage}`);
    const data = await response.json();

    // Append new items to the container
    const container = document.getElementById('content-container');
    data.items.forEach(item => {
      const div = document.createElement('div');
      div.className = 'item';
      div.textContent = item.title;
      container.insertBefore(div, sentinel);
    });

    currentPage++;

    // Check if there's more content
    if (!data.hasMore) {
      handleEndOfContent();
    }
  } catch (error) {
    console.error('Failed to load:', error);
  } finally {
    isLoading = false;
    hideLoading();
  }
}

// Handle loading states and end of content
let hasMore = true;

function showLoading() {
  document.getElementById('loading').classList.remove('hidden');
}

function hideLoading() {
  document.getElementById('loading').classList.add('hidden');
}

function handleEndOfContent() {
  hasMore = false;

  // Stop observing - no more content to load
  observer.disconnect();

  // Show end message
  document.getElementById('end-message').classList.remove('hidden');
}

// Update the observer callback to check hasMore
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting && hasMore && !isLoading) {
    loadMoreContent();
  }
}, { rootMargin: '100px' });