Невозможно прочитать свойство 'scrollHeight' of undefined

Question

Я разработал чат-систему с использованием javascript и php, но проблема в том, что когда новое сообщение получено или все больше сообщений, и он получил свиток, когда новое сообщение получает пользователь должен прокрутить пользовательский режим, чтобы перейти к нижней части, поэтому я попытался добавить javascript, чтобы сделать свиток внизу, но дело в том, что оно не работает, а также получает ошибку javascript, хотя

вот ошибка, получил

неперехваченным TypeError: не удается прочитать свойство «scrollHeight» неопределенной

также у меня есть НОАК ed ajax cache false, чтобы обновлять журнал чата каждые 2 секунды, чтобы новое сообщение можно было увидеть не путем обновления страницы путем прямого обновления через jquery, не влияет ли это на это?

вот мой код

<div class="sidebar-content"> 
<?php 
    $get_query = mysqli_query($connection, "SELECT * FROM users WHERE uid != '".$_SESSION['uid']."'"); 
    while($data_user = mysqli_fetch_assoc($get_query)) { 
?> 
<div class="contact" onclick="get(<?php echo $data_user["uid"]; ?>);"> 
    <?php if(!empty($data_user["profile_picture"])) { ?> 
    <img src="<?php echo $data_user["profile_picture"]; ?>" class="contact__photo" /> 
    <?php } else { ?> 
    <img src="uploads/profile_img.jpg" class="contact__photo" /> 
    <?php } ?> 
    <span class="contact__name"><?php echo $data_user["fullname"]; ?></span> 
    <span class="chat__id"><?php echo $data_user["uid"]; ?></span> 
    <span class="contact__status <?php if($data_user["online_status"] == "Online") { echo "online";} ?>"></span> 
</div> 
<?php } ?> 
<div class="search"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/elastic-srch.png" alt="" class="search__img" /> 
    <input type="text" class="search__input" placeholder="Search" /> 
</div> 
</div> 
<div class="chat"> 
    <span class="<?php if($status == "Online") { echo 'online_stat';} else {echo "ofline_stat";} ?>"></span> 
<span class="chat__back" onclick="reload();"></span> 
<span class="chat__status">status</span> 
<div class="chat__person"> 
    <span class="chat__online active"></span> 
    <span class="chat__name" id="chat_name">Huehue Huehue</span> 
    <span class="contact__id" id="contact__id">Huehue Huehue</span> 
</div> 
<div id="chat_messages"> 
</div> 
<script> 

    $.ajaxSetup({cache:false}); 
    var timeout = setInterval(reloadChat, 2000);  
    function reloadChat() { 
     var rid = document.getElementById("contact__id").innerHTML; 
     $('#msgs').load('includes/messages.php?receipt_id='+rid); 
    } 
    $('#chat-scroll').animate({ 
    scrollTop: $('#msgs').get(0).scrollHeight}, 2000); 
</script> 

</div> 

Answer 1

изменение этой линии

scrollTop: $('#msgs').get(0).scrollHeight}, 2000); 

в

scrollTop: $('#msgs').eq(0).scrollHeight}, 2000); 

или

scrollTop: $('#msgs')[0].scrollHeight}, 2000);