Вы можете использовать прослушиватели событий AJAX и JavaScript.

1] Структура HTML: создайте структуру HTML, включающую контейнер для отображения сообщений и элемент загрузчика, который будет появляться при загрузке новых сообщений.

// Add div for posts-container
<div id="posts-container"></div>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Load Posts</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="posts-container"></div>
  <div id="loader">Loading...</div>
  <script src="script.js"></script>
</body>
</html>

2] Когда страница загружается, вызовите loadMorePosts(); // Начальная загрузка

  • На текущей странице получить startIndex и endIndex
  • Получите данные сообщений из mockData, используя startIndex и lastIndex.
function loadMorePosts() {
  const startIndex = (currentPage - 1) * postsPerPage;
  const endIndex = startIndex + postsPerPage;
  const newPosts = mockPosts.slice(startIndex, endIndex);

  if (newPosts.length > 0) {
    displayPosts(newPosts);
    currentPage++;
  } else {
    loader.textContent = 'No more posts to load';
    window.removeEventListener('scroll', checkScroll);
  }
}

loadMorePosts() // show inital posts on webpage

3] Чтобы отображать сообщения в пользовательском интерфейсе, для каждого сообщения:

  • Создать элемент div (postElement) — document.createElement(‘div’)
  • Добавить classList— postElement.classList.add(‘post’)
  • Добавьте текстовое содержимое
  • затем добавить кpostsContainer
function displayPosts(posts) {
  posts.forEach((post) => {
    const postElement = document.createElement('div');
    postElement.classList.add('post');
    postElement.textContent = post;
    postsContainer.appendChild(postElement);
  });
}

4] Когда мы прокручиваем, просто измените размер окна в соответствии со списком mockData,

1. const { scrollTop, scrollHeight, clientHeight } = document.documentElement; : в этой строке используется деструктуризация для извлечения трех свойств из объекта document.documentElement:

  • scrollTop: Текущая позиция вертикальной прокрутки документа.
  • scrollHeight: общая высота всего документа, включая любое содержимое, которое может быть прокручено вне поля зрения.
  • clientHeight: высота видимой части документа в области просмотра браузера.

2. if (scrollTop + clientHeight >= scrollHeight - 20) { : Это if условие проверяет, прокрутил ли пользователь почти нижнюю часть страницы. Это делается путем сравнения суммы текущей позиции прокрутки (scrollTop) и высоты видимого окна просмотра (clientHeight) с общей высотой документа (scrollHeight) минус 20 пикселей.

  • Вычитание 20 пикселей, вероятно, предназначено для того, чтобы вызвать загрузку большего количества контента, прежде чем он достигнет абсолютного низа страницы.
window.addEventListener('scroll', checkScroll);

function checkScroll() {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  
  if (scrollTop + clientHeight >= scrollHeight - 20) {
    loader.style.display = 'block';
    
    // load more post when we scroll
    setTimeout(() => {
      loader.style.display = 'none';
      loadMorePosts();
    }, 1000);
  }
}

Выполнение,

// script.js

const postsContainer = document.getElementById('posts-container');
const loader = document.getElementById('loader');

const mockPosts = [
  'Post 1',
  'Post 2',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 1',
  'Post 2',
  'Post 3',
  'Post 3',
  'Post 3',
  'Post 3',
  // Add more posts here
];

let currentPage = 1;
const postsPerPage = 3;

function displayPosts(posts) {
  posts.forEach((post) => {
    const postElement = document.createElement('div');
    postElement.classList.add('post');
    postElement.textContent = post;
    postsContainer.appendChild(postElement);
  });
}

function loadMorePosts() {
  const startIndex = (currentPage - 1) * postsPerPage;
  const endIndex = startIndex + postsPerPage;
  const newPosts = mockPosts.slice(startIndex, endIndex);

  if (newPosts.length > 0) {
    displayPosts(newPosts);
    currentPage++;
  } else {
    loader.textContent = 'No more posts to load';
    window.removeEventListener('scroll', checkScroll);
  }
}

function checkScroll() {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 20) {
    loader.style.display = 'block';
    setTimeout(() => {
      loader.style.display = 'none';
      loadMorePosts();
    }, 1000);
  }
}

loadMorePosts(); // Initial load

window.addEventListener('scroll', checkScroll);

Бесконечная прокрутка

import React, { useState, useEffect } from 'react';

function InfiniteScroll() {
  const [items, setItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    // Simulate fetching new items
    const fetchMoreItems = () => {
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, index) => ({
          id: currentPage * 10 + index,
          name: `Item ${currentPage * 10 + index}`,
        }));
        setItems(prevItems => [...prevItems, ...newItems]);
      }, 1000); // Simulated delay
    };

    fetchMoreItems();
  }, [currentPage]);

  useEffect(() => {
    function handleScroll() {
      const windowHeight = window.innerHeight;
      const scrollY = window.scrollY || window.pageYOffset;
      const contentHeight = document.body.offsetHeight;

      if (scrollY + windowHeight >= contentHeight - 100) {
        setCurrentPage(prevPage => prevPage + 1);
      }
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [currentPage]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default InfiniteScroll;

Спасибо за прочтение

  • 👏 Пожалуйста, хлопайте в историю и подписывайтесь на меня 👉
  • 📰 Посмотреть больше материалов для подготовки Интервью
  • 🔔 Подпишитесь на меня: LinkedIn!

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями