自动向下滚动聊天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>

Answer 2

在不知道HTML代码的情况下很难分辨,但我认为你的div没有高度设置和/或不允许溢出(例如通过CSS height: 200px; overflow: auto).

我在jsfiddle上做了一个工作样本:http://jsfiddle.net/hu4zqq4x/

我在div中创建了一些虚拟HTML标记,a)溢出并且b)具有设置高度.滚动是通过调用函数完成的

function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}

,在这种情况下,一次在'documentReady'上.

prop('scrollHeight') 将访问匹配元素集中第一个元素的属性值.

Answer 3

在 JQuery 中追加后，只需添加这一行

<script>
    $("#messages").animate({ scrollTop: 20000000 }, "slow");
</script>