ScrollTop在动态生成的元素上不起作用

Question

I am trying to create a chat system (like Facebook)'s where a user clicks the name of the online user and a chat box will appear. _chatbox is generated dynamically using javascript. It will scroll down to the last message. The chat box and messages load/display successfully but the scroll down function is not working... why?

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

It works, but you seemed to select the wrong element. I adapted your code so that i can demonstrate what is going on. Your scrollable element here is the message container (class ".popup-messages"), not the popup itself.

You need to adapt this code though, as i selected directly the .popup-messages element, but you might want to select the one that is specifically inside your popup.

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

Why do you use innerHTML instead of creating an element?

Can you try creating the element with Javascript and adding it to DOM manually like:

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

I think setting innerHtml and converting it to DOM is processed later than your function call.

Read up on creating elements with Javascript here: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement