Question

我有3个嵌套在其父级的聊天框，并使用jquery自动滚动到聊天消息区域的底部。 chatboxes

如果聊天框只有1，但滚动到底部工作但是如果它变成两个或三个或更多并且我将更多内容添加到其消息区域，则滚动条将跳转到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

这有效，但这是一个糟糕的代码实践：

由于我们可以设置滚动区域的垂直位置，我所做的只是将位置增加到不可数字。

where x.Login_Status == "Submitted"

jQuery滚动到聊天框的底部

1 个答案: