jQuery滾動到聊天框底部

Question

我有3個聊天框嵌套在其父級中，並且正在使用jquery自動滾動到聊天消息傳遞區域的底部。 聊天框

如果聊天框只有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("");
        };