Вы можете использовать прослушиватели событий 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!
Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями