1

我目前正在从事一个不允许使用 jQuery 的项目，而且我对 JavaScript 和 OO 编程作为一个整体（两周）非常陌生。您可以在以下 repo 中查看整个项目：https ://github.com/Sntax/jsChat/blob/master/script.js

基本上我正在创建一个简单的聊天应用程序作为学习项目。我正在使用以下方法将 HTML 注入 div onClick 或 Enter/Tab：

var jsChat = {
  username: document.getElementById('username'),
  comment: document.getElementById('comment'),
  output: document.getElementById('output'),
};

function postData(){
  jsChat.output.innerHTML += '<div class="username">' + jsChat.username.value + ':' + '</div>';
  jsChat.output.innerHTML += '<div class="comment">' + jsChat.comment.value + '</div>';
  clearContent();
}

现在它将成功打印到 div，但是一旦“评论”对于 div-height 来说太长，它们将自动滚动到页面底部并且看不见。我想设置一种方法来强制滚动“向下滚动”到 div 的底部，以便它像普通的聊天应用程序一样将旧的聊天评论从屏幕顶部滚动出来。

忍者编辑：我尝试将以下内容放入 postData() 函数中无济于事：

    jsChat.output.scrollTop = 99999;
4

2 回答 2

1

您可以使用该scrollTo功能，如下所示：

window.scrollTo(DOMNodeOfMyNewMessage.offsetTop,window.scrollY);

这会将最新消息滚动到屏幕顶部。

但是，您可能希望将页面滚动到新评论的高度。这也是可能的，使用scrollBy函数和元素的offsetHeight：

window.scrollBy(DOMNodeOfMyNewMessage.offsetHeight, window.scrollY);

最终代码可能如下所示：

var jsChat = {
  username: document.getElementById('username'),
  comment: document.getElementById('comment'),
  output: document.getElementById('output'),
},
latestMessage;//DOM Node of my new message

function postData(){
  latestMessage = document.createElement('div');
  latestMessage.innerHTML = '<div class="username">' + jsChat.username.value + ':</div>' +
  '<div class="comment">' + jsChat.comment.value + '</div>';
  clearContent();//Not sure what this does, check if you still need it with this code
  latestMessage = jsChat.output.appendChild(latestMessage);// appendChild: see https://developer.mozilla.org/docs/Web/API/Node.appendChild
  //Now we scroll the message into view
  window.scrollBy(latestMessage.offsetHeight, window.scrollY);
}
于 2013-08-20T16:05:20.983 回答
0

将评论发布到输出后：

var last_comment_index = jsChat.comment.length - 1;
jsChat.output.scrollTop = jsChat.comment[last_comment_index].offsetTop;

这将滚动到最后一条评论。希望有帮助。

于 2013-08-20T16:06:49.623 回答