ScrollTop 不适用于动态生成的元素答案

【问题标题】：ScrollTop doesn't work on dynamically generated elementsScrollTop 不适用于动态生成的元素
【发布时间】：2018-02-28 11:55:44
【问题描述】：

我正在尝试创建一个聊天系统（如 Facebook），用户在该系统中单击在线用户的姓名，就会出现一个聊天框。 _chatbox 是使用 javascript 动态生成的。它将向下滚动到最后一条消息。聊天框和消息加载/显示成功，但向下滚动功能不起作用...为什么？

//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups() {
  //code for popup here
}

//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name) {

  var element = '<div class="popup-box chat-popup" id="' + id + '">';
  element = element + '<div class="popup-head">';
  element = element + '<div class="popup-head-left">' + name + '</div>';
  element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\'' + id + '\');">&#10005;</a></div>';
  element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
  document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
  calculate_popups();
  scrollDown(id);
}

//scroll down to the last message
function scrollDown(id) {
  var messages = document.getElementById(id);
  messages.scrollTop = messages.scrollHeight;
}

//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups() {
  //calculate popups here
}

<div class="sidebar-name">
  <a href="javascript:register_popup('ind', 'Indiana Pacers');">
    <img width="30" height="30" src="img/ind.png" />
    <span>Indiana Pacers</span>
  </a>
</div>

【问题讨论】：

不知道为什么它被标记为 jQuery，因为你根本没有使用它

标签： javascript scrolltop

【解决方案1】：

它有效，但您似乎选择了错误的元素。我修改了您的代码，以便我可以演示发生了什么。您的可滚动元素是消息容器（类“.popup-messages”），而不是弹出窗口本身。

您需要修改此代码，因为我直接选择了 .popup-messages 元素，但您可能想要选择专门在弹出窗口中的那个。

//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups()
{
    //code for popup here
}

//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name)
{

    var element = '<div class="popup-box chat-popup" id="'+ id +'">';
    element = element + '<div class="popup-head">';
    element = element + '<div class="popup-head-left">'+ name +'</div>';
    element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
    element = element + '<div style="clear: both"></div></div><div class="popup-messages"><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>message</p><p>last message</p></div></div>';
    document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;    
    calculate_popups();
    scrollDown(id);
}

//scroll down to the last message
function scrollDown(id)
{
    var messages = document.getElementsByClassName('popup-messages')[0];
    messages.scrollTop = messages.scrollHeight;
}

//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
   //calculate popups here
}

window.onload = function(){
  register_popup('test', 'testName');
};

.popup-messages {
  height: 100px;
  overflow-y: scroll;
}

<div class="sidebar-name">
    <a href="javascript:register_popup('ind', 'Indiana Pacers');">
        <img width="30" height="30" src="img/ind.png" />
        <span>Indiana Pacers</span>
    </a>
</div>

【讨论】：

【解决方案2】：

你为什么使用innerHTML而不是创建一个元素？

您可以尝试使用 Javascript 创建元素并手动将其添加到 DOM，例如：

var popupBox = document.createElement("div");
// Set properties
var popupHead = document.createElement("div");
// Set properties
popupBox.appendChild(popupHead);
// etc. etc

// Then add it to DOM
document.getElementsByTagName("body")[0].appendChild(element)

// This should work now
calculate_popups();
scrollDown(id);

我认为设置 innerHtml 并将其转换为 DOM 比您的函数调用晚。

在此处阅读有关使用 Javascript 创建元素的信息： https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

【讨论】：