jQuery滚动到chatbox的底部

Question

我在它的父程序中嵌套了3个聊天框，并且正在使用jquery自动滚动到聊天消息区底部。聊天室

如果chatbox只有1，则滚动到底部工作，但是如果它变成2或3或更多，并且我将更多的内容添加到它的消息区域，那么滚动条将跳到div的中间，现在它停止像以前一样滚动到底部。

​

$(document).on("keyup",".textareaxmsg",function(vnt){
  if(vnt.keyCode === 13 ){ 
    if($.trim($(this).val())){
      var conTent = "<div  class='b5d_wa msgb'><div class='d_bzAe_5'><span><span>" +$(this).val() +"</span></span></div></div>";
      $(this).parents(".msg_body_a").children(".msga").append(conTent);
      $(this).val("");
      $(this).parents(".chat_body").children(".msg_body_a").scrollTop($(".msg_body_a")[0].scrollHeight);
    }else{
      $(this).val("");
    }
  }
});

<div class="c_boxcnt">
    <div class="chat_box">
        <div class="chat_header">
            <div class="l_aZn_5a">
                <p><a href="#">James Oduro </a></p>
                <span class="closechat "><i class="fa fa-times tooltip"  title="Close"></i></span> <span class="minimizechat "></span><span class="minimizechat "><i class="fa fa-camera tooltip"  title="Add Photos"></i></span>
            </div>
            <div class="l_aZn_5a">
                <div class="cupht"><img src="uploaded/1033761452673232.jpg" /></div>
            </div>
        </div>
        <div class="chat_body">
            <div class="msg_body_a">
                <div class="msga">
                    <div  class="b5d_wa">
                        <div>
                            <div class="dz_d5ae"><a href="#"><img src="uploaded/1033761452673232.jpg" height="30"  width="30"/></a></div>
                            <div class="d_bzAe_4">
                                <span class="a_r5ia"><span>made my birthday a wonderful one. God richly bless you in </span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mbox">
                    <form method="post" action="#">
                        <textarea class="textareaxmsg" placeholder="Type a message..." title="Type a message"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

​

Answer 1

这起作用了，但这是一种糟糕的代码实践：

因为我们可以设置滚动区域的垂直位置，所以我所做的就是将这个位置增加到不可数数。

    if( $(this).parents(".msg_body_a").children(".msga").append(conTent)){

         $(this).parents(".chat_body").children(".msg_body_a").scrollTop(1000 * 1000 * 5000 *2 * 1000 *90000); /* set uncountable number */
        $(this).val("");
        };