我正在尝试创建一个聊天系统(如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 + '\');">✕</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
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
它有效,但你似乎选择了错误的元素。我调整了你的代码,以便我可以演示正在发生的事情。这里的可滚动元素是消息容器(类“.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 +'\');">✕</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>
答案 1 :(得分:0)
为什么使用innerHTML而不是创建元素?
您可以尝试使用Javascript创建元素并手动将其添加到DOM,如:
public string GetValue<TType>(Expression<Func<TType>> field)
我认为设置innerHtml并将其转换为DOM的处理晚于函数调用。
在此处阅读使用Javascript创建元素: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement