• 0

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

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

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

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

 

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

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


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

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

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>

 

ييي.png

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

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


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

يمكنك أن تستعمل 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;

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

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

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 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>

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

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

ولتمرير شريط التمرير إلى الأسفل يجب أن نحصل على طول الصندوق من خلال الخاصية 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>

 

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


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

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

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

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


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

تسجيل الدخول

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


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