Question

我目前正在开发一个不允许使用jQuery的项目，我对整个JavaScript和OO编程都很陌生（两周）。您可以在以下仓库中查看整个项目：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高度变得太长，它们将自动滚动页面底部并且看不见。我想设置一种方法来强制滚动“向下滚动”到div的底部，这样它就可以像在正常的聊天应用程序一样滚动屏幕顶部的旧聊天注释。

Ninja编辑：我尝试将以下内容放入postData（）函数中无效：

    jsChat.output.scrollTop = 99999;

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

Answer 2

将评论发布到输出中：

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

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

向下滚动Native JS中的innerHTML函数

2 个答案: