Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74020

Check if scrollbar is at the bottom without causing reflow

$
0
0

I have this function:

        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 call this function before I render the html to check if my content is at bottom so I should move the scrollbar to bottom after I've added new content.

The problem is that it's causing reflow that I want to eliminate, because the function is causing double layout first when I call is_bottom and second after I've rendered new content.

I think that this will improve my code a bit in same cases where there is lot of rendering. Even mili seconds will make a difference.

So my question is this, is there any other way to check if scrollbar is at bottom? I can use any sentinel element and using css to position it until it's hidden (e.g. using visibility: hidden). Maybe using new itersection or resize observer, it can be performance improvement that's only accessed in few browsers.

EDIT: I've just realized that I can check if my content have scrollbar first. The code that is making re-render multiple times don't show scrollbar at all:

    function have_scrollbar() {
        return fill.outerWidth() !== self.outerWidth();
    }

the problem is that this also causing reflow, is there a way to check if element have scrollbar without casing reflow?


Viewing all articles
Browse latest Browse all 74020

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>