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 { {1}}）。

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

我在div中创建了一些虚拟HTML标记，a）溢出并且b）具有设置高度。滚动是通过调用函数

完成的

height: 200px; overflow: auto

，在这种情况下，一旦打开＆＃39; documentReady＆＃39;。

function getMessages(letter) { var div = $("#messages"); div.scrollTop(div.prop('scrollHeight')); }将访问匹配元素集中第一个元素的属性值。

Answer 3

在JQuery中追加后，只需添加此行

即可

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

Answer 4

你需要做的是把它分成两个div。一个有溢出设置滚动，一个内部用于保存文本，所以你可以得到它的outersize。

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

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

你可以在这里查看一个jsfiddle：http://jsfiddle.net/xj5c3jcn/1/

显然，你不想每次都重建整个文本div，所以只需要一个例子。

Answer 5

    var l = document.getElementsByClassName("chatMessages").length;
    document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();

这应该有效

Answer 6

不必混合使用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方法调用中的参数..

Answer 7

它为我工作试试这个，如果有任何疑问，请告诉我，

setInterval(function () {
    $("#messages").load("msg_show.php");

   $("#messages").animate({
        scrollTop: $("#messages")[0].scrollHeight}, -500);

}, 1000);

Answer 8

我在尝试时发现了这个非常简单的方法：将scrollTo设置为div的高度。

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

Answer 9

如果您只是滚动高度，当用户想要查看他之前的消息时，它会出现问题。因此，当新消息出现时，您需要制作一些代码。使用jquery最新版本。我在加载邮件之前检查了高度。 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
    }

Answer 10

由于我不是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>

Answer 11

要滚动到消息框顶部的特定元素，请查看以下演示：

https://jsfiddle.net/6smajv0t/

function scrollToBottom(){
	const messages = document.getElementById('messages');
	const messagesid = document.getElementById('messagesid');  
	messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);

#messages {
  height: 200px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>

Answer 12

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 13

我更喜欢使用 Vanilla JS

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

where element.scrollTo(x-coord, y-coord)

Answer 14

使用这个

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

自动向下滚动聊天div

14 个答案: