Applying scrollbar to all elements on the page

[WesleyBranton]

I'm really interested in this project, as I think it would pair well with one of my browser extension projects. However, as far as I can tell, the documentation is a little lacking.

From what I can see, it seems like to initialize the scrollbar I would need to pass a specific element. Is it possible to easily apply these scrollbars to all elements on the page without having to loop through each element? Furthermore, is it possible to initialize once when the page loads and then also apply the scrollbars to any new elements or DOM changes that are done after the page loads?

[KingSora]

@WesleyBranton good day :)

Since the plugin initialization isn't "free" in terms of resources and DOM elements, it wasn't build to be used in the way you described.

If you would like to initialize it to all elements you can do it like this:

document.querySelectorAll('*').forEach((elm) => {
  const osInstance = OverlayScrollbars(elm, { });
});

but I highly recommend not to do that. I would at least filter overflowing and scrollable elements and initialize the plugin only to those.

If you want to apply the plugin to elements which were added after the your initial batch of initializations you would need to either know when the elements are added or you have to use a MutationObserver which detects those changes. But also here applies what I mentioned. Dont blindly apply it to all elements, instead only select the ones where it makes sense.

I hope this helps :)