ScrollTop在動態生成的元素上不起作用

Question

我正在嘗試創建一個聊天系統（如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> 

Answer 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> 

Answer 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/zh-CN/docs/Web/API/Document/createElement