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

问题描述

我有这个代码，用来加载聊天

function getMessages(letter) {var div = $('#messages');$.get('msg_show.php', 函数(数据){div.html(数据);});}setInterval(getMessages, 100);

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

这不起作用:

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

解决方案

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

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

什么时候应该滚动?

• 用户首次加载消息.
• 新消息已到达，您位于滚动条的底部(当用户向上滚动以阅读以前的消息时，您不希望强制滚动).

以编程方式:

if (firstTime) {container.scrollTop = container.scrollHeight;第一次 = 假；} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {container.scrollTop = container.scrollHeight;}

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

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');函数 appendMessage() {const message = document.getElementsByClassName('message')[0];const newMessage = message.cloneNode(true);消息.appendChild(newMessage);}函数 getMessages() {//在收到您的消息之前.shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;/** 获取您的消息，我们将通过同步附加一条新消息来模拟它.*/追加消息()；//收到你的消息后.如果(！应该滚动){滚动到底部()；}}函数滚动到底部(){消息.scrollTop = 消息.scrollHeight;}滚动到底部()；setInterval(getMessages, 100);

#messages {高度:200px；溢出-y:自动；}

<div class="message">你好世界

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);

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

This doesn't work:

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: total container size.
• scrollTop: amount of scroll user has done.
• clientHeight: amount of container a user sees.

When should you scroll?

• User has loaded messages for the first time.
• New messages have arrived and you are at the bottom of the scroll (you don't want to force scroll when the user is scrolling up to read previous messages).

Programmatically that is:

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

Full chat simulator (with 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屋！