javascript - 自动向下滚动聊天 div

Question

我有这段代码，可以加载聊天

function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data);
  });
}

setInterval(getMessages, 100);

我必须添加什么，以便在页面加载时自动向下滚动 #messages div，并在每个新的聊天帖子中再次滚动？

这行不通:

function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data);
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });
}

setInterval(getMessages, 100);

Answer 1

让我们先回顾一些关于滚动的有用概念:

• scrollHeight : 总容器大小。
• scrollTop : 滚动用户完成的数量。
• clientHeight :用户看到的容器数量。

什么时候应该滚动？

• 用户第一次加载消息。
• 新消息已到达并且您位于滚动条的底部(您不想在用户向上滚动以阅读以前的消息时强制滚动)。

编程方式是:

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

完整的聊天模拟器(使用 JavaScript):

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');

function appendMessage() {
	const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
	// Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);

#messages {
  height: 200px;
  overflow-y: auto;
}

<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>