ما هو التمرير اللانهائي؟

ربما تكون قد شاهدت بالفعل مواقع مثل المتاجر عبر الإنترنت، حيث تظهر المنتجات بشكل مستمر أثناء التمرير لأسفل الصفحة. مثال آخر هو Endless.horse، قد يبدو بسيطًا ولكنه مثال ممتاز لتوضيح وظيفة "Infinite Scrolls". عند دخولك إلى الموقع، ترى حصانًا، ولكن عندما تنتقل إلى أسفل الصفحة، تدرك أن أرجل الحصان تستمر في النمو إلى أجل غير مسمى، ولن تتمكن أبدًا من الوصول إلى أقدام الحصان.

تنفيذ التمرير اللانهائي

تُستخدم هذه الوظيفة على نطاق واسع في التطوير الحديث. يمكننا أن نرى تمريرًا لا نهائيًا أثناء الحركة على شبكات التواصل الاجتماعي الرئيسية، مثل Twitter وFacebook وخاصة Instagram، حيث يبدو أن المحتوى لا ينتهي أبدًا أثناء التمرير لأسفل الصفحة.

في هذه المقالة، سأوضح التنفيذ الأساسي لهذه الوظيفة. ومع ذلك، لا يعالج هذا الأسلوب مشكلات مثل المشكلات المتعلقة بالاستعلامات الطويلة وتنفيذ التخزين المؤقت والحلول الأخرى المطلوبة لتطبيقات الإنتاج. ومع ذلك، فهذه نقطة بداية لفهم كيفية تنفيذ هذه الميزة.

الخطوة 1: حدد مكان إضافة وظيفة التمرير اللانهائي

أولاً، حدد المكان الذي ستضيف فيه وظيفة التمرير اللانهائي. هل ستكون قائمة بالمشاركات أو الصور؟ ستحتاج أيضًا إلى تحديد مصدر البيانات. في هذا المثال، سنستخدم صورًا من واجهة برمجة التطبيقات الأساسية Random Fox API.

الخطوة 2: قم بإنشاء ملف HTML الخاص بك

قم بإنشاء ملف HTML وقم بتضمين حاوية لصور الثعلب العشوائية.

Fox Images

الخطوة 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: قم بإنشاء ملف JavaScript الخاص بك

حدد الحاوية واحصل على عنوان URL لـ Random Fox API. لا تنس ربط ملفات JavaScript و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 




  
  
  الخطوة 5: إضافة حدث التمرير


لتنفيذ وظيفة التمرير اللانهائي، أضف مستمع الحدث هذا:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




إذا كان مجموع التمرير Y والارتفاع الداخلي أكبر من أو يساوي ارتفاع التمرير، فهذا يعني أننا وصلنا إلى نهاية المستند وبالتالي نحتاج إلى تحميل المزيد من الصور.


  
  
  خاتمة


يجب أن تكون صفحتك الآن فعالة باستخدام تقنية التمرير اللانهائي. إليك تحديًا بالنسبة لك: حاول إعادة هذا المشروع باستخدام واجهة برمجة تطبيقات أخرى من اختيارك، وقم أيضًا بتنفيذ أسلوب أكثر تفصيلاً لعرض العناصر الخاصة بك. حظ سعيد!