• 0

تحريك الشريط الجانبي تلقائيا الى الأسفل كما فى المحادثات

السلام عليكم

فى هذا الكود الشريط الجانبي يتحرك لاسفل كلما اضيفت رسالة جديدة

لكن فى الكود هنا يضيف رسالة تتكرر  - كيف يمكن الغاء هذا من الكود ليتم فقط عرض الرسائل القادمة من قاعدة البيانات بدلا من ذلك

انا لا اعرف اي جزء بالتحديد يمكن حذفة او تعديلة لذا ارجو منكم التكرم وتوضيح ذلك

<style>
#messages {
  height: 200px;
  overflow-y: auto;
}
</style>
<div id="messages">
  <div class="message">
    رسالة - مرحبا
  </div>
</div>
<script>
const messages = document.getElementById('messages');

function appendMessage() {
    const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
    // قبل الحصول على رسائلك.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * احصل على رسائلك ، سنقوم بمحاكاتها من خلال إلحاق واحدة جديدة بشكل متزامن.
   */
  appendMessage();
  // بعد استلام رسائلك.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);
</script>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

في دالة getMessages يتم إستدعاء الدالة appendMessage وهي المسئولة عن إضافة رسالة أخرى:

function getMessages() {
    // قبل الحصول على رسائلك.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  
  
  /*
   * احصل على رسائلك ، سنقوم بمحاكاتها من خلال إلحاق واحدة جديدة بشكل متزامن.
   */
  
  // قم بحذف هذا السطر
  // appendMessage();
  
  // بعد استلام رسائلك.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن