チャットウィンドウとして機能するdiv要素をスクロールする方法を教えてください。

Question

私は私の質問のためにjsFiddleを準備している：私は、マルチプレイヤーゲームでのチャット用（黄色）div要素を使用しようとしています

。

残念ながら、divは、最新の行であるappend()までスクロールしません。

$('#chatBtn').button().click(function(e) { 
 
    e.preventDefault(); 
 

 
    var str = $('#chatInput').val(); 
 
    $('#chatInput').val(''); 
 
    $('#chatDiv').append('<br>' + str); 
 

 
    var h = $('#chatDiv').attr('scrollHeight'); 
 

 
    //$('#chatDiv').scrollTop(h); 
 

 
    $('#chatDiv').animate({ // DOES NOT SCROLL TO DIV BOTTOM, WHY? 
 
    scrollTop: h 
 
    }, 1000); 
 
}); 
 

 
$('#chatInput').on('input', function(e) { // ENABLES/DISABLES BUTTON, WORKS OK 
 
    var str = $('#chatInput').val(); 
 
    $('#chatBtn').button(str.length > 0 ? 'enable' : 'disable'); 
 
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css"); 
 
div#chatDiv { 
 
    margin: 0 auto; 
 
    background-color: yellow; 
 
    width: 400px; 
 
    height: 100px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<div id="chatDiv"></div> 
 

 
<p align="center"> 
 
    <input id="chatInput" type="text" size="40" /> 
 
    <button id="chatBtn" disabled>Send</button> 
 
</p>

chatInputに4-5の単語を入力してたびchatBtnをクリックしてください - あなたは、問題が表示されます。一番下の行が示されていない、chatDiv -elementを下にスクロールされていません。

Answer 1

次の行は

$(document).ready(function() { 
    $('#chatBtn').click(function(e) { 
     e.preventDefault(); 
     var str = $('#chatInput').val().trim(); 
      if(str !== ''){ 
       $('#chatInput').val(''); 
       $('#chatDiv').append('<br>' + str); 
       var h =$('#chatDiv').prop('scrollHeight'); 
       $('#chatDiv').animate({ 
       scrollTop: h 
       }, 1000); 
      } 
     }); 
    }); 

をクリックむしろあなたはボタンの一つの条件を置くことができる入力イベントを使用するよりも

var h = $('#chatDiv').attr('scrollHeight'); 

が

var h =$('#chatDiv').prop('scrollHeight'); 

とコードの線の上に置き換え高与えていません入力イベントを削除する場合は、ボタンから無効を削除することを忘れないでください。