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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية