htmlアプリケーションにスクロールを適用する

Question

jqueryを使用して、下のHTMLチャットアプリケーションにスクロールバーを適用する方法、会話型チャットボットにスクロールバーを追加する方法。

<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>`

これは、あなたがそれをCSSで簡単に行うことができる場合は、このためのjQueryを使用したいと思うのはなぜチャットボットアプリケーション

Answer 1

のために使用しています全体のコードですか？ CSSの解決策では

あなたがラッパーに特定の高さを設定し、オーバーフロー-Y

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

場合コンテンツにスクロールを追加するには、ウィンドウを強制されます350pxよりも大きい許可する必要があります。

他のコードがある場合は、コードをここに投稿するか、フィドルを作成して、達成しようとしていることを正確に確認してください。

jQueryの方法は、私は自分のコードにあなたが共有するスニップを適用するが、それは私のために動作しません

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