Sticky scroll to bottom

This commit is contained in:
Mattias Erming 2014-03-06 10:53:02 -08:00
parent 7f3656e458
commit b45a3e09fd
2 changed files with 22 additions and 6 deletions

View file

@ -115,14 +115,15 @@ h2 {
padding: 0px 8px;
}
#chat .messages {
bottom: 26px;
left: 0;
overflow-y: auto;
padding: 6px 0;
position: absolute;
right: 160px;
top: 36px;
word-wrap: break-word;
z-index: 0;
bottom: 26px;
}
#chat .messages .message {
padding: 0 8px;

View file

@ -20,9 +20,6 @@ $(function() {
var View = {};
View.refresh = function(event) {
if (event.data == undefined || event.data == []) {
return;
}
chat.html("");
event.data.forEach(function(network) {
chat.append(Mustache.render(channels, network, {
@ -30,6 +27,7 @@ $(function() {
messages: messages
}));
});
chat.find(".messages").scrollToBottom();
sidebar.html(
Mustache.render(networks, {
networks: event.data
@ -44,19 +42,23 @@ $(function() {
case "user":
target = ".users";
render = Mustache.render(
$("#users").html(), {users: event.data}
users, {users: event.data}
);
break;
case "message":
target = ".messages";
render = Mustache.render(
$("#messages").html(), {messages: event.data}
messages, {messages: event.data}
);
break;
}
if (target != "") {
target = $("[data-id='" + event.target + "'] " + target);
var keepAtBottom = target.isScrollBottom();
target.append(render);
if (keepAtBottom) {
target.scrollToBottom();
}
}
};
@ -86,9 +88,22 @@ $(function() {
});
});
(function() {
var highest = 1;
$.fn.bringToTop = function() {
this.css('z-index', highest++);
};
$.fn.scrollToBottom = function() {
this.scrollTop(this.prop("scrollHeight"));
};
$.fn.isScrollBottom = function() {
var height = this.outerHeight();
var scroll = this.scrollTop();
if ((scroll + height + 5) >= this.prop("scrollHeight")) {
return true;
}
};
})();