Anwenden von Bildlauf zu einer HTML-Anwendung

Question

Wie können Bildlaufleisten auf die untenstehende HTML-Chat-Anwendung mit jQuery anwenden, Möglichkeiten zum Hinzufügen von Bildlaufleisten zu den Chat-Chat-Bot.

<div class="wrapper"> 
 
      <div class="container" style="top:45%"> 
 
     \t 
 
     \t <div class="left"> 
 
     \t <ul class="people"> 
 
     \t \t \t \t <img src="miracle.png" alt="" /> 
 
     \t \t \t \t </li> 
 
     \t \t \t </ul> 
 
        <div class="top"> 
 
         <input type="text" placeholder="Search"/> 
 
         <a href="javascript:;" class="search"></a> 
 
        </div> 
 
        <ul class="people"> 
 
     \t \t \t <li class="person" data-chat="person2"> 
 
         <img src="Doris.png" alt="" style="width:15%;height:15%" /> 
 
          <span class="name">Doris</span> 
 
         </li> 
 
        </ul> 
 
     \t \t \t 
 
       </div> 
 
     \t \t 
 
     \t \t 
 
       <div class="right" > 
 
        <div class="top"><center><span><span class="name">Conversational Help Desk Agent</span></span></center></div> 
 
        <div class="chat" style="overflow:scroll" data-chat="person2"> 
 
     \t \t \t \t <div id="hell1" class="bubble you"></div> 
 
     \t \t \t \t <div id="hell" class="bubble me"></div> 
 
        </div> 
 
     \t \t \t 
 
        <div class="write"> 
 
     
 
     \t \t \t <form> 
 
     
 
     \t \t \t <input id="m" autocomplete="off" name="SEND" /> 
 
         <a href="javascript:;" class="write-link send" id="send"></a> 
 
     \t \t \t \t </br><br> 
 
     
 
     \t \t \t \t </form> 
 
     
 
     \t \t </div> 
 
     \t \t 
 
       </div> 
 
     \t \t  <div id='gt'></div> 
 
      </div> 
 
     </div>`

Dies ist der gesamte Code, die ich für meine Chat-Bot Anwendung bin mit

Answer 1

Warum würden Sie jQuery für diese verwenden möchten, wenn es leicht von CSS kann getan werden?

In CSS-Lösung müssen Sie bestimmte Höhe auf der Verpackung eingestellt und ermöglichen Überlauf-y

.chat { 
    height: 350px; 
    overflow-y: auto; 
} 

, dass das Fenster zwingen wird, scroller, falls Inhalte hinzuzufügen ist größer als 350px.

Wenn Sie einen anderen Code haben, schreiben Sie den Code hier oder erstellen Sie Geige, damit wir genau sehen können, was Sie erreichen wollen.

jQuery Weg wäre

$('.chat').css({'height': '350px', 'overflow-y': 'auto'})