自动向下滚动聊天div
我有这个代码，加载聊天
function getMessages(letter) { var div = $("#messages"); $.get('msg_show.php', function(data) { div.html(data); }); } setInterval(getMessages, 100); 我必须添加，在页面加载时自动向下滚动#messages div，并在每次新的聊天post中再次滚动？
这个，不起作用：
function getMessages(letter) { var div = $("#messages"); $.get('msg_show.php', function(data) { div.html(data); $('#messages').scrollTop($('#messages')[0].scrollHeight); }); } setInterval(getMessages, 100);
让我们先回顾一下有关滚动的一些有用概念：
- 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; }
在不知道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')将访问匹配元素集中第一个元素的属性值。
你需要做的是把它分成两个div。 一个有溢出设置滚动，一个内部用于保存文本，所以你可以得到它的outersize。
textdiv.html(""); $.each(chatMessages, function (i, e) { textdiv.append("" + e + "
"); }); chatdiv.scrollTop(textdiv.outerHeight());
你可以在这里查看一个jsfiddle： http ： //jsfiddle.net/xj5c3jcn/1/
显然你不想每次都重建整个文本div，所以只需要一个例子就可以了。
var l = document.getElementsByClassName("chatMessages").length; document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();
这应该工作
不必混合jquery和javascript。 像这样使用，
function getMessages(letter) { var message=$('#messages'); $.get('msg_show.php', function(data) { message.html(data); message.scrollTop(message[0].scrollHeight); }); } setInterval(function() { getMessages("letter"); }, 100)
将scrollTop()放在get()方法中。
你也错过了getMessage方法调用中的参数..
它为我工作尝试这个，让我知道如果有任何疑问，
setInterval(function () { $("#messages").load("msg_show.php"); $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, -500); }, 1000);
我在试验时发现了这个非常简单的方法：将scrollTo设置为div的高度。
var myDiv = document.getElementById("myDiv"); window.scrollTo(0, myDiv.innerHeight);
在JQuery中追加后，只需添加此行即可
如果你只是滚动高度，当用户想要查看他之前的消息时会出现问题。 因此，当新消息出现时，您需要制作一些代码。 使用jquery最新版本。 我在加载邮件之前检查了高度。 2.再次检查新的高度。 3.如果高度不同，那么它将滚动，否则它将不会滚动。 4.不在if条件下，您可以放置任何铃声或任何其他function。 当新消息来临时将播放。 谢谢
var oldscrollHeight = $("#messages").prop("scrollHeight"); $.get('msg_show.php', function(data) { div.html(data); var newscrollHeight = $("#messages").prop("scrollHeight"); //Scroll height after the request if (newscrollHeight > oldscrollHeight) { $("#messages").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div }