Scroll detect

[MyNameTony1000]

Hello, please tell me, is it possible to track when an element becomes scrollable and when it doesn’t?
For example, there is a block on which the plugin is initialized, inside it there is another element that is hidden. Initially, the content has enough height and there is no scrolling, but when you click on the button, the inner block opens and there is more content, the block becomes scrollable. I wanted to know - is it possible to determine the moment when a block is overflowing and add a class to it using this plugin?)) As I understand it, there is a function inside that determines this moment

[KingSora]

Good day @MyNameTony1000 :)

Yes, thats possible. OverlayScrollbars has an event called updated which is invoked when anything relevant updates. That event receives arguments which has exactly the information you are looking for. It even knows how much the content is overflowing or how much the overflow changed.

[MyNameTony1000]

It turns out that I need to register an event and look for something that will help me in its arguments?
Like this?

let el = OverlayScrollbars(this, {
  overflow: {
    x: 'visible-hidden',
    y: 'scroll',
  },
  scrollbars: {
    visibility: elVisibility,
    autoHide: elAutoHide,
    autoHideDelay: 300,
  },
});

el.on('updated', function (instance, onUpdatedArgs) {
  console.log(instance);
  console.log(onUpdatedArgs);
}); 

[KingSora]

@MyNameTony1000 exactly!

For completeness you could also do it like:

let el = OverlayScrollbars(this, {
  overflow: {
    x: 'visible-hidden',
    y: 'scroll',
  },
  scrollbars: {
    visibility: elVisibility,
    autoHide: elAutoHide,
    autoHideDelay: 300,
  },
}, {
  updated: (instance, onUpdatedArgs) => {
    console.log(instance);
    console.log(onUpdatedArgs);
  }
});

[MyNameTony1000]

Got it, thank you very much, I'll look for it)