聊天系统的滚动条一直自动向下滚动答案

【问题标题】：Scroll bar for chat system is is auto scrolling down all the time聊天系统的滚动条一直自动向下滚动
【发布时间】：2023-03-11 07:45:02
【问题描述】：

我使用 jQuery 和 ajax 创建了一个简单的聊天系统，我希望滚动条在以下两种情况下位于 div 的底部： _第一次加载页面。 _新消息已到。问题是滚动条一直自动向下滚动。这是我的 html 和 javascript 代码

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>

【问题讨论】：

标签： javascript php html jquery

【解决方案1】：

你能先纠正一下这行吗：

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

然后重试？因为改变scrollTop位置的正确方法是给jQuery函数.scrollTop(value) - docs at api.jquery.com传递一个参数

另外，您说“滚动条一直自动向下滚动” - 但不清楚您何时/多久调用一次 load() 函数。因为，从您的代码来看，似乎每次调用后，无论响应如何，您都会运行滚动操作。如果您想仅在新消息时自动滚动 - 那么您应该检查一下。例如，“action.php”如果没有新消息则返回false，并且在加载函数中，如果响应为false，则不要进行任何滚动。

【讨论】：

verjas 实际上在我的代码中是这样的（而不是 $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight"); 这是 $("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000); ，这就是导致问题的原因，所以你的答案是正确的，我们应该使用正确的方法来更改滚动顶部位置

【解决方案2】：

对于那些使用$("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000);的人来说，这会让滚动条一直向下滚动，所以你必须把它改成 $('#shoot').scrollTop( $('#shoot').prop("scrollHeight") ); ，这是在不强制滚动条停留在特定位置的情况下到达新位置的正确方法。

【讨论】：