在Native JS中向下滚动innerHTML函数

Scroll Down on innerHTML function in Native JS

本文关键字：滚动 innerHTML 函数 Native JS      更新时间：2023-09-26

我目前正在进行一个不允许jQuery的项目，而且我对JavaScript和OO编程还很陌生（两周）。您可以在以下回购中看到整个项目：https://github.com/Sntax/jsChat/blob/master/script.js

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

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 Edit：我尝试将以下内容放入postData（）函数中，但没有成功：

    jsChat.output.scrollTop = 99999;

您可以使用scrollTo函数，如下所示：

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

这将把最新的信息滚动到屏幕顶部。

但是，您；I’我可能想把页面滚动到新评论的高度。使用scrollBy函数和元素’s 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);
}

将注释发布到输出后：

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

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

相关文章：