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>