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!
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");
}
}
}
});