بناء نظام كشف التمرير اللانهائي: خطوة بخطوة باستخدام JavaScript

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.


بعد أن فهمنا النظرية وراء ميزة التمرير اللانهائي وكيف تعمل من خلال قياسات المتصفح المختلفة، حان الوقت لتطبيق ما تعلمناه عمليًا. في هذا الدرس، سنقوم ببناء كاشف بسيط للتمرير اللانهائي باستخدام JavaScript، وسنقوم بتجربته في متصفح الويب.

الخطوة 1: تحضير بيئة العمل (ملف HTML)

سنحتاج إلى صفحة HTML بسيطة تحتوي على محتوى طويل بما يكفي لجعل الصفحة قابلة للتمرير. سنقوم بإنشاء ملف index.html ونضع فيه بعض المحتوى الوهمي:


<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>كاشف التمرير اللانهائي</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
        }
        .content-block {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        h1 {
            color: #0056b3;
            text-align: center;
            margin-bottom: 30px;
        }
        .footer-message {
            text-align: center;
            padding: 20px;
            background-color: #e9ecef;
            border-radius: 5px;
            margin-top: 30px;
            color: #6c757d;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>صفحة تجريبية لميزة التمرير اللانهائي</h1>

    <div id="content-container">
        <!-- سنضيف هنا محتوى وهمي لجعل الصفحة طويلة -->
        <script>
            for (let i = 1; i <= 50; i++) {
                document.write(`
                    <div class="content-block">
                        <h2>منشور رقم ${i}</h2>
                        <p>هذا هو نص المنشور رقم ${i}. محتوى وهمي لغرض التجربة. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                `);
            }
        </script>
    </div>

    <div class="footer-message">
        <p>هذا هو تذييل الصفحة. راقب وحدة التحكم (Console) عند اقترابك من هنا!</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

في هذا الكود، استخدمنا حلقة for بسيطة داخل وسم <script> لإنشاء 50 كتلة محتوى (منشور) تلقائيًا، مما يجعل الصفحة طويلة جدًا وقابلة للتمرير. لا تنسَ أننا ربطنا ملف script.js في نهاية وسم <body>.

الخطوة 2: إضافة كود JavaScript للكشف عن التمرير

الآن، سنقوم بإنشاء ملف جديد باسم script.js في نفس المجلد الذي يحتوي على index.html، وسنضع فيه الكود الذي شرحناه في الدرس النظري:


// مراقبة حدث التمرير في المتصفح
window.addEventListener('scroll', () => {
  // 1. حساب المسافة التي نزلها المستخدم بالفعل
  const scrollTop = window.scrollY;
  // 2. حساب الارتفاع المرئي للشاشة حالياً
  const windowHeight = window.innerHeight;
  // 3. حساب الارتفاع الكامل لصفحة الويب بالكامل
  const docHeight = document.documentElement.scrollHeight;

  // التحقق: إذا اقترب المستخدم من نهاية الصفحة بمسافة 100 بكسل أو أقل
  // قمنا بزيادة الهامش من 50 إلى 100 بكسل لتكون التجربة أوضح
  if (scrollTop + windowHeight >= docHeight - 100) {
    console.log("🔄 لقد وصلت إلى منطقة التحميل! جاري جلب محتوى جديد...");
    // هنا يمكننا استدعاء دالة لجلب المزيد من البيانات من الخادم
    // على سبيل المثال: fetchMorePosts();

    // لمزيد من التوضيح، يمكننا طباعة القيم:
    console.log(`
      scrollTop: ${scrollTop},
      windowHeight: ${windowHeight},
      docHeight: ${docHeight},
      مجموع (scrollTop + windowHeight): ${scrollTop + windowHeight},
      نقطة التحميل (docHeight - 100): ${docHeight - 100}
    `);

    // **ملاحظة هامة:** لمنع تكرار الرسالة عند التمرير المستمر في الأسفل،
    // في تطبيق حقيقي يجب أن يكون هناك آلية لمنع التحميل المتكرر
    // مثل متغير حالة (isLoading = true) أو إزالة الـ event listener مؤقتًا.
  }
});

console.log("تم تحميل السكريبت بنجاح! ابدأ بالتمرير...");

ملاحظات على الكود العملي:

  • قمنا بتغيير هامش الأمان من -50 إلى -100 في الشرط if (scrollTop + windowHeight >= docHeight - 100). هذا يعني أن رسالة "لقد وصلت إلى منطقة التحميل" ستظهر عندما تكون على بعد 100 بكسل من نهاية الصفحة، مما يمنحك فرصة أفضل لرؤيتها قبل الوصول إلى النهاية القصوى.
  • أضفنا طباعة مفصلة للقيم في console.log لتتبع ما يحدث بدقة عند تشغيل الشرط.
  • أشرنا إلى أهمية منع تكرار التحميل في تطبيقات العالم الحقيقي، حيث أن هذا الكود سيستمر في طباعة الرسالة طالما أنك في منطقة الـ 100 بكسل الأخيرة من الصفحة.

الخطوة 3: التجربة في المتصفح

  1. افتح ملف index.html في متصفح الويب الخاص بك (يمكنك سحبه وإفلاته في نافذة المتصفح، أو النقر المزدوج عليه).
  2. افتح أدوات المطور (Developer Tools) في متصفحك. عادةً ما يمكنك القيام بذلك عن طريق الضغط على F12 أو Ctrl+Shift+I (في Windows/Linux) أو Cmd+Option+I (في macOS).
  3. انتقل إلى علامة التبويب "Console" في أدوات المطور.
  4. ابدأ بالتمرير ببطء نحو أسفل الصفحة.
  5. عندما تقترب من تذييل الصفحة (الذي يبدأ حوالي 100 بكسل من النهاية)، ستلاحظ ظهور الرسالة "🔄 لقد وصلت إلى منطقة التحميل! جاري جلب محتوى جديد..." بالإضافة إلى تفاصيل القيم التي قمنا بطباعتها.

تهانينا! لقد قمت للتو بتطبيق نظام كشف التمرير اللانهائي الخاص بك. في تطبيق حقيقي، بدلاً من مجرد طباعة رسالة في الـ Console، ستقوم باستدعاء دالة تقوم بإرسال طلب إلى الخادم (باستخدام fetch API على سبيل المثال) لجلب المزيد من المنشورات، ثم ستقوم بإضافتها ديناميكيًا إلى #content-container في صفحة HTML الخاصة بك.

الخطوات التالية (للمطور الطموح)

  • جلب البيانات الحقيقية: تعلم كيفية استخدام fetch API لجلب بيانات من واجهة برمجة تطبيقات (API) وهمية أو حقيقية.
  • إضافة المحتوى ديناميكيًا: بعد جلب البيانات، قم بإنشاء عناصر HTML جديدة (مثل <div> للمنشورات) وإضافتها إلى الصفحة.
  • منع التحميل المتكرر: أضف متغير حالة (مثل let isLoading = false;) لمنع إرسال طلبات متعددة للخادم أثناء تحميل المحتوى.
  • إظهار مؤشر تحميل: أضف رسالة أو أيقونة "جاري التحميل..." عندما يتم جلب البيانات وإخفائها بعد الانتهاء.

بهذا، تكون قد وضعت قدمك على الطريق الصحيح لبناء ميزات تفاعلية وديناميكية لمواقع الويب الخاصة بك!