كيفية اكتشاف وقت قيام المستخدم بالتمرير إلى أسفل Div باستخدام jQuery

لقد قمت بإنشاء عنصر div بمحتوى ديناميكي يتميز بـ " إعداد الفائض التلقائي. لتحسين تجربة المستخدم، تريد تحميل محتوى إضافي عندما يقوم المستخدم بالتمرير إلى أسفل مربع div هذا. ومع ذلك، فأنت غير متأكد من كيفية اكتشاف هذا الحدث المحدد.

يكمن مفتاح هذا الاكتشاف في استخدام خصائص وطرق محددة لـ jQuery:

• $().scrollTop(): يشير إلى عدد البكسلات التي تم تمرير العنصر
• $().innerHeight(): يمثل الارتفاع الداخلي للعنصر
• DOMElement.scrollHeight: إرجاع ارتفاع محتوى العنصر

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

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

يستخدم هذا الحل طريقة on()، المفضلة للتعامل مع الأحداث في إصدارات jQuery 1.7 .

ملاحظات إضافية:

• يتم إرفاق مستمع الحدث إلى div بمعرف #flux، الذي يمثل العنصر الذي ترغب في مراقبته.
• يتم استخدام وظيفة التنبيه () لأغراض العرض التوضيحي. يمكنك تضمين المنطق الخاص بك لتحميل محتوى إضافي هنا.
• يمكن العثور على مثال حي على http://jsfiddle.net/doktormolle/w7X9N/.