CODEWITHSUNDEEP
javascriptscrolltop
J.Parker
J.Parker

Reputation: 13

ScrollTop doesn't work on dynamically generated elements

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>

Upvotes: 1

Views: 1771

Answers (2)

Kaddath
Kaddath

Reputation: 6151

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>

Upvotes: 1

Wouter Coebergh
Wouter Coebergh

Reputation: 834

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

Upvotes: 0

Related Questions