jQuery滾動到底部動畫速度問題

Question

我只是在玩論壇應用程序的前端 jQuery 方面（我更適合后端 - 這是對模板 + js 創建的前端世界的一個很小的嘗試）。

本質上，對於每條新評論，聊天框容器都會自動滾動到底部，向用戶顯示最新消息。 我用來實現這一點的以下代碼是：

聊天消息 ID 位於聊天框 ID 容器中，兩者都是 css：

#chat-box {
  overflow: none;
  position: relative;
  width: 100%;
  height: 91vh;
}
#chat-messages {
  overflow: auto;
  position: absolute;
  width: 100%;
  max-height: 91vh;
}

對於這些，我正在應用以下動畫：

$('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, "slow");

觸發提交事件時使用的函數的精簡版本是：

function submitChatMessageEvent( event ) {
   console.log($('#btn-chat-input').val());
   $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(1000);
   $('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, 8000);
}

動畫也滿足了我的要求 - 也就是說，確保聊天框始終在聊天框底部顯示最近的聊天。 但是 - 對於上述動畫，“慢”方面根本不起作用......？ 關於自動滾動到 div 底部並溢出的任何專業提示。

我的想法是我需要創建分隔框 - 但不知何故先隱藏它，然后觸發滾動效果，同時淡入新創建的評論......但如果這是正確的方法，我需要一些指針！

Answer 1

使用您提供的信息似乎可以正常工作。

持續時間以毫秒為單位； 較高的值表示較慢的動畫，而不是較快的動畫。 可以提供字符串 'fast' 和 'slow' 分別表示 200 和 600 毫秒的持續時間。 http://api.jquery.com/show/

 var chatMessageBlock = $('#chat-block'); function submitChatMessageEvent( event ) { $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(200 /* fast */); $('#chat-messages').animate({ scrollTop: $(document).height() + $('#chat-messages').height() }, 600 /* 'slow' */); } submitChatMessageEvent(); $('#btn-chat-input').on('click',function(e){ $('#chat-messages')[0].scrollTop = 0; submitChatMessageEvent(e); });

 #chat-box { overflow: none; position: relative; width: 100%; height: 91vh; } #chat-messages { overflow: auto; position: absolute; width: 100%; max-height: 91vh; } p { margin: 1em; padding: 1em; border-bottom: 1px solid #ddd; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="btn-chat-input" value="Send" type="button"/> <div id="chat-block" style="display:none"> <p>One chat message</p> <p>Lorem ipsum</p> <p>My response</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>One last chat message</p> </div> <div id="chat-box"> <div id="chat-messages"></div> </div>

Answer 2

只需刪除$('#chat-messages')[0].scrollTop = 0; 來自您的點擊事件。

 var chatMessageBlock = $('#chat-block'); function submitChatMessageEvent( event ) { $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(200 /* fast */); $('#chat-messages').animate({ scrollTop: $(document).height() + $('#chat-messages').height() }, 600 /* 'slow' */); } submitChatMessageEvent(); $('#btn-chat-input').on('click',function(e){ submitChatMessageEvent(e); });

 #chat-box { overflow: none; position: relative; width: 100%; height: 91vh; } #chat-messages { overflow: auto; position: absolute; width: 100%; max-height: 91vh; } p { margin: 1em; padding: 1em; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="btn-chat-input" value="Send" type="button"/> <div id="chat-block" style="display:none"> <p>One chat message</p> <p>Lorem ipsum</p> <p>My response</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>One last chat message</p> </div> <div id="chat-box"> <div id="chat-messages"></div> </div>