自动向下滚动聊天div [英] Automatically scroll down chat div

问题描述

我有这个代码，加载聊天

I have this code, to load chat

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

setInterval(getMessages, 100);

我必须添加，在页面加载时自动向下滚动#messages div，并且每次新聊天帖？

What I have to add, to automatically scroll down #messages div on page load, and again with every new chat post?

这不起作用：

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

setInterval(getMessages, 100);

推荐答案

让我们回顾一下有关滚动的一些有用概念：

Let's review a few useful concepts about scrolling first:

• scrollHeight ：总容器大小。


• scrollTop ：滚动用户已完成的数量。


• clientHeight ：用户看到的容器数量。

• scrollHeight: total container size.
• scrollTop: amount of scroll user has done.
• clientHeight: amount of container an user sees.

什么时候滚动？

• 用户首次加载了消息。


• 新消息已经到达并且您位于滚动的底部（当用户向上滚动以阅读以前的消息时，您不想强制滚动。）

以编程方式：

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>

这篇关于自动向下滚动聊天div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！