Javascript 自动向下滚动聊天室div

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

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

---

不必混合使用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

方法调用中遗漏了一个参数。

不知道HTML代码很难判断，但我假设您的div没有设置高度和/或不允许溢出（例如，通过CSS

height:200px；overflow:auto

）

我在JSFIDLE上制作了一个工作示例：

我在一个div中创建了一些伪HTML标记，该div a）溢出，b）具有设置的高度。 滚动是通过调用函数来完成的

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

，在本例中为“documentReady”上的一次

---

prop（'scrollHeight'）

将访问匹配元素集中第一个元素的属性值。

需要做的是将其分成两个div。一个将溢出设置为滚动，另一个内部设置为保存文本，以便您可以将其外部化

<div id="chatdiv">
    <div id="textdiv"/>
</div>

textdiv.html("");
$.each(chatMessages, function (i, e) {
    textdiv.append("<span>" + e + "</span><br/>");
});
chatdiv.scrollTop(textdiv.outerHeight());

textdiv.html（“”）；
$。每个（聊天室消息、功能（即，e）{
textdiv.append（“+e+”
）；
});
scrollTop（textdiv.outerHeight（））；

您可以在这里查看JSFIDLE：

---

显然，您不希望每次都重新构建整个文本div，因此请恕我直言，这只是一个示例。

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

• ：容器总尺寸
• ：用户已完成的滚动量
• ：用户看到的容器数量

什么时候滚动？

• 用户首次加载了邮件
• 新消息已到达，您位于滚动的底部（当用户向上滚动以阅读以前的消息时，您不希望强制滚动）

以编程方式，即：

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

完整聊天模拟器（使用JavaScript）：

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

const messages=document.getElementById（'messages'）；
函数appendMessage（）{
const message=document.getElementsByClassName（'message'）[0]；
const newMessage=message.cloneNode（true）；
messages.appendChild（newMessage）；
}
函数getMessages（）{
//在收到你的信息之前。
shouldScroll=messages.scrollTop+messages.clientHeight==messages.scrollHeight；
/*
*获取您的消息，我们将通过同步附加一个新消息来模拟它。
*/
appendMessage（）；
//收到你的信息后。
如果（！shouldScroll）{
scrollToBottom（）；
}
}
函数scrollToBottom（）{
messages.scrollTop=messages.scrollHeight；
}
scrollToBottom（）；
设置间隔（getMessages，100）
#消息{
高度：200px；
溢出y：自动；
}

你好，世界
我在实验中发现了这个非常简单的方法：将
滚动设置为div的高度

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

在JQuery中添加append之后，这应该可以工作，只需添加这一行

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


$（“#消息”）.animate（{scrollTop:20000000}，“slow”）；
如果您只是滚动高度，当用户想要查看其上一条消息时，就会出现问题。所以你需要做一些事情，当新消息出现时，代码才会出现。使用jquery最新版本。
1.在这里，我检查了邮件加载前的高度。
2.再次检查新高度。
3.如果高度不同，则只在该时间滚动，否则不会滚动。
4.不在if条件下，您可以放置任何铃声或您需要的任何其他功能。这将在新消息到来时播放。谢谢

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
    }

因为我不是js高手，但我自己编写代码来检查用户是否在底层。
若用户位于底部，则聊天页面将自动滚动显示新消息。
若用户向上滚动，那个么页面将不会自动滚动到底部

JS代码-

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

html代码-

<div id="chat_con" class="chat_screen">
</div>

要从消息框顶部滚动到特定元素，请签出以下演示：



函数scrollToBottom（）{
const messages=document.getElementById（'messages'）；
const messagesid=document.getElementById（'messagesid'）；
messages.scrollTop=messagesid.offsetTop-10；
}
scrollToBottom（）；
设置间隔（scrollToBottom，1000）
#消息{
高度：200px；
溢出y：自动；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界7
你好，世界8
你好，世界9
你好，世界10
你好，世界11
你好，世界12
你好，世界13
你好，世界14
你好，世界15
你好，这里是world16
你好，世界17
你好，世界18
你好，世界19
你好，世界20
你好，世界21
你好，世界22
你好，世界23
你好，世界24
你好，世界25
你好，世界26
你好，世界27
你好，世界28
你好，世界29
你好，世界30

const messages=document.getElementById（'messages'）；
函数appendMessage（）{
const message=document.getElementsByClassName（'message'）[0]；
const newMessage=message.cloneNode（true）；
messages.appendChild（newMessage）；
}
函数getMessages（）{
//在收到你的信息之前。
shouldScroll=messages.scrollTop+messages.clientHeight==messages.scrollHeight；
/*
*获取您的消息，我们将通过同步附加一个新消息来模拟它。
*/
appendMessage（）；
//收到你的信息后。
如果（！shouldScroll）{
scrollToBottom（）；
}
}
函数scrollToBottom（）{
messages.scrollTop=messages.scrollHeight；
}
scrollToBottom（）；
设置间隔（getMessages，100）
#消息{
高度：200px；
溢出y：自动；
}

你好，世界
我更喜欢使用香草JS

let chatWrapper = document.querySelector('#chat-messages');
chatWrapper.scrollTo(0, chatWrapper.offsetHeight );

where element.sc
function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data).animate({scrollTop: div.prop("scrollHeight")});
    //use append() if msg_show.php returns single unread msg.
  });
}

setInterval(getMessages, 100);