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

Hamada Ahmed · 25 أبريل 2021

لدي قالب بين محتويات الصفحة يحتوي على محادثة

كيف اجعل الشريط الجانبي يتحرك تلقائيا لاسفل داخل ال div وليس الصفحة باكملها

<style type="text/css">
<!--
.div_chat{
overflow-y:auto;
height:300px;
}
-->
</style>
<div class="div_chat"> محتوى المحادثة </div>
<div> محتوى اخر </div>
<div> محتوى اخر </div>

Software_البرمجيات.pdf

بلال زيادة · 25 أبريل 2021

يمكنك استخدام خاصية

overflow-y:scroll;

بحيث يكون الشريط الجانبي بداخل المحتوى, يمكنك استخدام الكود التالي

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

.div_chat{
overflow-y:scroll;
height:300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="div_chat"> محتوى المحادثة 

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />


</div>
<div> محتوى اخر </div>
<div> محتوى اخر </div>
</body>
</html>

سامح أشرف · 25 أبريل 2021

يمكنك أن تستعمل JavaScript لتجعل الشريط ينزل إلى نهاية المحادثة، هنا مثال بسيط:

كود HTML:

<style>
  .container {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    overflow-y: auto;
  }

  .m {
    background: #f3f3f3;
    padding: 10px;
    margin: 10px 0;
  }
</style>

<div class="container" id="container">
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
</div>

الكود السابق سيعطي النتيجة التالية:

6085c53809c8b_Screenshot2021-04-25213800.png.61f25e36c56c11708e07c924cd91c777.png

ولتمرير شريط التمرير إلى الأسفل يجب أن نحصل على طول الصندوق من خلال الخاصية offsetHeight ونستخدمها كقيمة للخاصية scrollTop التي تقوم بتمرير شريط التمرير

var myElement = document.getElementById('container');

// طول الصندوق = 400 بيكسل
var height = myElement.offsetHeight

myElement.scrollTop = height;

وبهذا سيتم النزول إلى نهاية الصندوق بمجرد تحميل الصفحة.

Hamada Ahmed · 27 أبريل 2021

بتاريخ On 4/25/2021 at 21:43 قال سامح أشرف:
يمكنك أن تستعمل JavaScript لتجعل الشريط ينزل إلى نهاية المحادثة، هنا مثال بسيط:

كود HTML:
<style>
  .container {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    overflow-y: auto;
  }

  .m {
    background: #f3f3f3;
    padding: 10px;
    margin: 10px 0;
  }
</style>

<div class="container" id="container">
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
  <div class="m">message</div>
</div>
الكود السابق سيعطي النتيجة التالية:

ولتمرير شريط التمرير إلى الأسفل يجب أن نحصل على طول الصندوق من خلال الخاصية offsetHeight ونستخدمها كقيمة للخاصية scrollTop التي تقوم بتمرير شريط التمرير
var myElement = document.getElementById('container');

// طول الصندوق = 400 بيكسل
var height = myElement.offsetHeight

myElement.scrollTop = height;
وبهذا سيتم النزول إلى نهاية الصندوق بمجرد تحميل الصفحة.

حصلت على كود لكنة يضيف رسالة اوتوماتيكيا ولا اعرف كيف الغي هذه الاضافة

<style>
#messages {
  height: 200px;
  overflow-y: auto;
}
</style>
<div id="messages">
  <div class="message">
    Hello world
  </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>

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

السؤال

Hamada Ahmed

رابط هذا التعليق

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

3 أجوبة على هذا السؤال

Recommended Posts

بلال زيادة

رابط هذا التعليق

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

سامح أشرف

رابط هذا التعليق

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

Hamada Ahmed

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية