اسکرول بی نهایت چیست؟
ممکن است قبلاً سایت‌هایی مانند فروشگاه‌های آنلاین را دیده باشید که با اسکرول کردن صفحه به پایین، محصولات به طور مداوم ظاهر می‌شوند. مثال دیگر endless.horse است، ممکن است ساده به نظر برسد، اما یک مثال عالی برای نشان دادن کارایی “Infinite Scrolls” است. وقتی به وب سایت می روید، اسبی را می بینید، اما وقتی صفحه را پایین می برید، متوجه می شوید که پاهای اسب به طور نامحدود رشد می کنند و هرگز به پای اسب نمی رسید.
پیاده سازی اسکرول بی نهایت
این قابلیت به طور گسترده در توسعه مدرن استفاده می شود. ما می‌توانیم اسکرول بی‌نهایت را در شبکه‌های اجتماعی بزرگ مانند توییتر، فیس‌بوک و به‌ویژه اینستاگرام مشاهده کنیم، جایی که به نظر می‌رسد با اسکرول کردن صفحه به پایین، محتوا هرگز تمام نمی‌شود.
در این مقاله، من یک پیاده سازی اساسی از این عملکرد را نشان خواهم داد. با این حال، این رویکرد به مسائلی مانند مسائل مربوط به پرس و جوهای طولانی، اجرای حافظه پنهان و سایر راه حل های مورد نیاز برای برنامه های تولید نمی پردازد. با این حال، این یک نقطه شروع برای درک چگونگی پیاده سازی این ویژگی است.
مرحله 1: تصمیم بگیرید که کجا قابلیت اسکرول بی نهایت را اضافه کنید
ابتدا تصمیم بگیرید که در کجا قابلیت اسکرول بی نهایت را اضافه کنید. آیا لیستی از پست ها یا تصاویر خواهد بود؟ همچنین باید تصمیم بگیرید که داده ها از کجا می آیند. برای این مثال، از تصاویر یک API اصلی، Random Fox API استفاده خواهیم کرد.
مرحله 2: فایل HTML خود را ایجاد کنید
فایل HTML را ایجاد کنید و یک ظرف برای تصاویر روباه تصادفی خود قرار دهید.
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="container">
"script.js">
مرحله 3: فایل CSS خود را ایجاد کنید
برای این مثال، ما شیوه نامه را بسیار ساده نگه می داریم.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.header {
font-size: 32px;
color: black;
text-align: center;
font-family: Verdana, sans-serif;
}
img {
width: 400px;
height: 400px;
margin: 4px;
object-fit: cover;
}
مرحله 4: فایل جاوا اسکریپت خود را ایجاد کنید
ظرف را انتخاب کنید و URL Random Fox API را دریافت کنید. فراموش نکنید که فایل های جاوا اسکریپت و CSS خود را در HTML پیوند دهید.
const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";
function getRandomNumber() {
return Math.floor(Math.random() * 100);
}
function loadImages(numImages = 6) {
let i = 0;
while (i numImages) {
const img = document.createElement('img');
img.src = `${URL}${getRandomNumber()}.jpg`;
container.appendChild(img);
i++;
}
}
loadImages();
مرحله 5: رویداد اسکرول را اضافه کنید
برای پیاده سازی قابلیت اسکرول بی نهایت، این شنونده رویداد را اضافه کنید:
window.addEventListener('scroll', () => {
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
loadImages();
}
});
این در مورد است scrollY ه innerHeight بزرگتر یا مساوی است scrollHeight، به این معنی است که ما به پایان سند رسیده ایم و بنابراین باید تصاویر بیشتری را بارگذاری کنیم.
نتیجه
اکنون صفحه شما باید با تکنیک اسکرول بی نهایت کاربردی باشد. در اینجا یک چالش برای شما وجود دارد: سعی کنید این پروژه را با استفاده از API دیگری که انتخاب می کنید دوباره انجام دهید، همچنین سبک پیچیده تری را برای نمایش موارد خود پیاده سازی کنید. موفق باشید!
