聊天框滚动到底部滚动到页面末尾而不是聊天结束

Question

i have chatbox and this is my html code

                         <div class="card-body msg_card_body card-footer" >
                            <template v-for='(data,data_id) in active_chat_datas ' class='card-footer' id='scrollable' >
                                <div class="d-flex justify-content-start mb-4 last-footer" v-if="data['to_facebook_id'] == null">
                                    <div class="img_cont_msg">
                                        <img :src="active_customer['facebook_messages_link']" class="rounded-circle user_img_msg" />
                                    </div>
                                    <div class="msg_cotainer">
                                        @{{data['message']}}
                                        <span class="msg_time" style='width:250px;'>@{{date_format(data['created_at'])}}</span>
                                    </div>
                                </div>
                                <div v-else class="d-flex justify-content-end mb-4 last-footer">
                                    <div class="msg_cotainer_send">
                                        @{{data['message']}}
                                        <span class="msg_time_send" style='width:100px;'>@{{date_format(data['created_at'])}}</span>
                                    </div>
                                    <div class="img_cont_msg">
                                        <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg" />
                                    </div>
                                </div>
                            </template>
                            <div class="d-flex justify-content-end mb-4" id='myid'>
                                <div class="msg_cotainer_send ">
                                    <span class="msg_time_send" style='width:100px;'></span>
                                </div>
                            </div>
                        </div>

and i have this js code

$('#myid').stop ().animate ({
    scrollTop: $('#myid')[0].scrollHeight
});

when the code

scrollTop: $('#myid')[0].scrollHeight

execute the scrol go to the end of the page not of the chat like this pictures

but i need it to scroll to the botton of the chat like this picture

and this is sandbox link https://bo1lej.csb.app/

https://codesandbox.io/s/bo1lej

how can i do that thanks ..

Answer 1

Please try this :

<script>
 $(document).ready(function () {
   $(".msg_card_body").scrollTop($(".msg_card_body")[0].scrollHeight);
 });
</script>

this anwser is based on the sandbox you provided

Answer 2

Try this code below,

$("#custommyid").animate(
  { scrollTop: $("#custommyid")[0].scrollHeight },
  2000
);

This is the working code. click here In the provided sandbox,I make scrolling the chat app when the page loads ,since you didnt provide the chat url for getting chat messages and load it on the frontend.

I will give some knowledge about this. Because later someone can revist this and can learn this instead of just looking the code.animate function use to smoth the scrolling functionality. we can set this trasition.In here I set 2000ms seconds. And there some important point there.You can see that I have used "scrollHeight".It means total container height.there are couple of other concepts there.just see below

scrollTop -by now how amount of height user has scroll

clientHeight -how much of amount that user see in the container