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底部并溢出的专业提示。

我的想法是我需要创建分隔框 - 但不知何故先隐藏它，然后触发滚动效果，同时淡化新创建的注释......但如果这是正确的方法，我需要一些指针！< / p>

Answer 1

似乎与您提供的信息一起正常工作。

持续时间以毫秒为单位;值越高表示速度越慢动画，而不是更快的动画。字符串'快'和'慢'可以提供的指示持续时间为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>

jQuery滚动到底部动画速度问题

2 个答案: