كيفية التمرير تلقائيًا إلى نهاية Div عند إضافة البيانات

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

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

نهج JavaScript

استخدام الفاصل الزمني:

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

window.setInterval(function() { var elem = document.getElementById('data'); elem.scrollTop = elem.scrollHeight; }, 5000);

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

في هذا المثال، تعمل الدالة setInterval كل 5 ثوانٍ (5000 مللي ثانية) وتقوم بتحديث خاصية التمرير للأعلى في div بارتفاع التمرير الخاص بها. يؤدي هذا إلى تمرير div بشكل فعال

التنفيذ عند الطلب:

إذا كان لديك التحكم في وقت إضافة البيانات إلى div، فيمكنك تنفيذ التمرير السلوك يدويًا عن طريق استدعاء الوظيفة التالية بعد إضافة بيانات جديدة:

functionscrollToEnd(elem) { elem.scrollTop = elem.scrollHeight;

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}