Here is a function I have:
is_bottom: function() {
if (settings.scrollBottomOffset === -1) {
return false;
} else {
var scroll_height, scroll_top, height;
scroll_height = self[0].scrollHeight;
scroll_top = self.scrollTop();
height = self[0].offsetHeight;
var limit = scroll_height - settings.scrollBottomOffset;
return scroll_top + height > limit;
}
}
I use this function to determine if my content is at the bottom before rendering the html. If it is, I move the scrollbar on the element to the bottom after adding new content.
The issue is that this causes reflow which I want to avoid, as it results in double layout - once when checking if it's at the bottom and again after rendering the new content.
I believe optimizing this part of the code could make a difference, especially during heavy rendering operations. Even saving milliseconds can matter.
So, my question is, is there an alternative way to check if the scrollbar is at the bottom? Perhaps using a sentinel element and CSS positioning until it's hidden (e.g., with visibility: hidden). It might involve utilizing new intersection or resize observers for better performance, possibly improving only in certain browsers.
EDIT: I've realized that I can first check if my content has a scrollbar. The code that triggers multiple re-renders doesn't even display a scrollbar:
function have_scrollbar() {
return fill.outerWidth() !== self.outerWidth();
}
The problem here is that this also leads to reflow. Is there a way to check if an element has a scrollbar without causing reflow?