自动滚动聊天界面

Question

自动滚动聊天界面

42

我有这段代码，用于加载聊天室

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

- Adam Výborný

3

如果你的元素ID是messages，那么可能应该是document.getElementById('messages')（注意缺少#）。 - UweB

1

抱歉，实际上我没有带 #。 - Adam Výborný

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Saif Ali · Answer 1

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>

- flaviut · Answer 2

您可以使用CSS来做这个，使用overflow-anchor: https://caniuse.com/css-overflow-anchor。

const scroller = document.getElementById('scroller')
const anchor = document.getElementById('anchor')
let i = 0;
setInterval(() => {
  const p = document.createElement("p")
  p.textContent = `Message ${i++}`
  scroller.insertBefore(p, anchor)
}, 1000)

#scroller {
  /* begin example styling */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* end example styling */
}
#scroller * {
  /* don't allow the children of the scrollable element to be selected as an anchor node */
  overflow-anchor: none;
}

#anchor {
  /* allow the final child to be selected as an anchor node */
  overflow-anchor: auto;
  /* anchor nodes are required to have non-zero area */
  height: 1px;
  /* begin example styling */
  align-self: stretch;
  /* end example styling */
}

<div id="scroller">
  <!-- append content here -->
  <div id="anchor"></div>
</div>

请注意，要激活此功能，用户必须先滚动到页面底部。您可以通过使用JavaScript来触发初始滚动以解决这个问题。

- Jean Leon · Answer 3

我更喜欢使用原生的JavaScript

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

element.scrollTo(x-coord, y-coord) 是一个编程语言中的代码。

- ANOL GHOSH · Answer 4

使用这个

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

- Anoop Joshi P · Answer 5

不必混合使用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 方法时，您漏掉了一个参数。

- Gaurav Saini · Answer 6

虽然我不是 JavaScript 的专家，但我自己写了一些代码来检查用户是否在页面底部。

如果用户在页面底部，则聊天页面将自动滚动到新消息处。

如果用户向上滚动，则页面将不会自动滚动到底部。

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>