Scroll bar for chat system is is auto scrolling down all the time

user_14297428 0
Viewed 162

I had created a simple chat system using jQuery and ajax, I want the scroll bar to be in the bottom of div in two occasion that is : _first time loading page. _New messages has arrived. the problem is the scroll bar is auto scrolling down all the time. this is my html and javascript code

function load (){
    $.post("action.php",{
           Action : "get"
    },function(resp){

       var scrollTop =  $('#shoot').scrollTop();
       var clientheight = $('#shoot').height();
       var scrollTop =  parseInt(scrollTop)+320;
       var scrollHeight =  $('#shoot').prop("scrollHeight");

          $('#shoot ').html(resp);
        if (scrollTop < scrollHeight  ) {

        }else {
      
              $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight");
        }
    });
  }
 <div class="row justify-content-center h-100">

                <div class="col-md-8 col-xl-6 chat">
                    <div class="card">
                        <div class="card-header msg_head">
                            <div class="d-flex bd-highlight">
                                <div class="img_cont">
                                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
                                    <span class="online_icon"></span>
                                </div>
                                <div class="user_info">
                                    <span>Chat with Khalid</span>
                                    <p>1767 Messages</p>
                                </div>
                                <div class="video_cam">
                                    <span><i class="fas fa-video"></i></span>
                                    <span><i class="fas fa-phone"></i></span>
                                </div>
                            </div>
                            <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
                            <div class="action_menu">
                                <ul>
                                    <li><i class="fas fa-user-circle"></i> View profile</li>
                                    <li><i class="fas fa-users"></i> Add to close friends</li>
                                    <li><i class="fas fa-plus"></i> Add to group</li>
                                    <li><i class="fas fa-ban"></i> Block</li>
                                </ul>
                            </div>
                        </div>
                        <div id="shoot" class="card-body msg_card_body">
                            <div class="d-flex justify-content-start mb-4">
                                <div class="msg_cotainer">
                                    Hi, how are you samim?

                                </div>
                            </div>
                            <div class="d-flex justify-content-end mb-4">
                                <div class="msg_cotainer_send">
                                    Hi Khalid i am good tnx how about you?

                                </div>
                            </div>

</div>

html php jquery javascript
2 Answers

Can you first correct this line:

$('#shoot').scrollTop(  $('#shoot').prop("scrollHeight") );
/* $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight"); */

and then retry? Because the correct way to change scrollTop position is by passing a parameter to the jQuery function .scrollTop(value) - docs at api.jquery.com

Also, you said "scroll bar is auto scrolling down all the time" - but it is not clear when / how often do you call the load() function. Because, from your code, it seems that after each call, no matter the response, you run a scroll action. If you want to make an auto-scroll only at new messages - then you should for check that. For example, make "action.php" return false if no new messages, and in the load function, don't do any scroll if response is false.

user_49027240

For those who used $("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000); this keeps the scroll bar scrolling down all the time , so you must change it to $('#shoot').scrollTop( $('#shoot').prop("scrollHeight") ); , this is the right way to get to new position of the scroll bar without forcing it to stay at specific position.

user_142974280
Related