CODEWITHSUNDEEP
javascripthtmlcss
softya
softya

Reputation: 260

Chat box scroll to bottom scroll to the end of the page not end of the chat

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 enter image description here

but i need it to scroll to the botton of the chat like this picture enter image description here

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

https://codesandbox.io/s/bo1lej

how can i do that thanks ..

Upvotes: 1

Views: 260

Answers (2)

Ankush Rathour
Ankush Rathour

Reputation: 457

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

Upvotes: 1

Lakruwan Pathirage
Lakruwan Pathirage

Reputation: 657

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

Upvotes: 1

Related Questions