Been noticing this for a while and just today figured out what was happening.
Here’s a function I’m using to subscribe to a socket.io server, all this one is supposed to do is scroll the content down every time a message is posted. Works as expected 90% of the time, other times though I’m not so lucky.
this.chatService.getMessages().subscribe(message => {
var sTop = this.content.getContentDimensions().scrollTop;
var sHeight = this.content.getContentDimensions().scrollHeight;
console.log("sTop = " + sTop);
console.log("sHeight = " + sHeight);
this.chatOffset = (sHeight - sTop);
console.log("chatOffset = " + this.chatOffset);
console.log("chatHeight = " + this.chatHeight);
var c = this;
if (this.chatHeight == this.chatOffset) {
setTimeout(function () {
c.scrollToBottom();
console.log("Message Posted - Scrolling Now" + message);
}, 100);
}
else {
this.askScroll = true;
}
});
Here’s a screenshot of my console when it is working as expected. As you can see, when the variable “sTop” is logged you’ll notice it’s logging the correct value that container is currently scrolled down by. (The first few don’t need to be scrolled, since there’s enough room on the page for them initially, which is why they are logged as zero).
In this second screenshot of my console when the function isn’t working as expected, you’ll notice every time the “sTop” variable is logged, it’s just logged as zero, so my function thinks it doesn’t need to scroll anymore, thus rendering it useless. This happens on physical devices, emulated devices, and chrome emulation alike.
All this being said, I could very well be doing something critically wrong, if anyone has any idea please feel free to let me know.