Keep chat stickied to the bottom on resize
Fixes the chat not staying at the bottom when opening the on-screen keyboard on mobile.
This commit is contained in:
parent
7834d12e8f
commit
312b7eaa0c
35
client/js/libs/jquery/stickyscroll.js
vendored
35
client/js/libs/jquery/stickyscroll.js
vendored
@ -1,29 +1,48 @@
|
|||||||
(function($) {
|
(function($) {
|
||||||
$.fn.unsticky = function() {
|
$.fn.unsticky = function() {
|
||||||
return this.unbind(".sticky");
|
return this.trigger("unstick.sticky").unbind(".sticky");
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.sticky = function() {
|
$.fn.sticky = function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
var stuckToBottom = true;
|
var stuckToBottom = true;
|
||||||
|
var lastStick = 0;
|
||||||
|
|
||||||
self
|
var keepToBottom = function() {
|
||||||
.on("scroll.sticky", function(e) {
|
|
||||||
stuckToBottom = self.isScrollBottom();
|
|
||||||
})
|
|
||||||
.on("msg.sticky", function() {
|
|
||||||
if (stuckToBottom) {
|
if (stuckToBottom) {
|
||||||
self.scrollBottom();
|
self.scrollBottom();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$(window).on("resize.sticky", keepToBottom);
|
||||||
|
self
|
||||||
|
.on("unstick.sticky", function() {
|
||||||
|
$(window).off("resize.sticky", keepToBottom);
|
||||||
})
|
})
|
||||||
|
.on("scroll.sticky", function() {
|
||||||
|
// When resizing, sometimes the browser sends a bunch of extra scroll events due to content
|
||||||
|
// reflow, so if we resized within 250ms we can assume it's one of those. The order of said
|
||||||
|
// events is not predictable, and scroll can happen last, so not setting stuckToBottom is
|
||||||
|
// not enough, we have to force the scroll still.
|
||||||
|
if (stuckToBottom && Date.now() - lastStick < 250) {
|
||||||
|
self.scrollBottom();
|
||||||
|
} else {
|
||||||
|
stuckToBottom = self.isScrollBottom();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on("scrollBottom.sticky", function() {
|
||||||
|
stuckToBottom = true;
|
||||||
|
lastStick = Date.now();
|
||||||
|
this.scrollTop = this.scrollHeight;
|
||||||
|
})
|
||||||
|
.on("msg.sticky", keepToBottom)
|
||||||
.scrollBottom();
|
.scrollBottom();
|
||||||
|
|
||||||
return self;
|
return self;
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.scrollBottom = function() {
|
$.fn.scrollBottom = function() {
|
||||||
var el = this[0];
|
this.trigger("scrollBottom.sticky");
|
||||||
this.scrollTop(el.scrollHeight);
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user