Detect if OverlayScrollbars element is scrollable

Question

I am using OverlayScrollbars to make a div scrollable. On page load, I'm trying to detect if the div content has overflowed the container div or not. This is so that I can apply some additional styling to the container if the content has overflowed.

This is the code I have for initialising the scroll bars:

        $("#entries").overlayScrollbars({
            scrollbars: {
                visibility: "auto",
                autoHide: "move",
            },
            callbacks: {
                onScroll: function (event) {
                    scrollBarOverlays();
                }
            }
        });

I have then tried to use .getState() to see the hasOverflow value - but on page load this returns empty values. It only shows values once the content has been scrolled.

https://kingsora.github.io/OverlayScrollbars/#!documentation/method-getstate

Any help appreciated!

Answer 1

IF anyone else is struggling with this, I managed to solve it using onOverflowChanged callback.

       $("#entries").overlayScrollbars({
            scrollbars: {
                visibility: "auto",
                autoHide: "move",
            },
            callbacks: {
                onScroll: function (event) {
                    scrollBarOverlays();
                },
                onOverflowChanged : function(eventArgs) {
                    if(eventArgs.yScrollable==true){
                        $("#entries").addClass("bottom-gradient-box");
                    } else {
                        $("#entries").removeClass("bottom-gradient-box");
                    }
                }
            }
        });