Disabling scrollbar when display modal

[winkcor]

I have a NextJs project and I add the scrollbar to the body via a hook and I can't add it to another element inside the body, it has to be on the body, and when I show a modal that is inside the body the body is still scrolling behind it.
Is there a way to disable scrolling while the modal is active?

[KingSora]

Good day @winkcor :)

You can always change the scroll behavior of your OverlayScrollbars instance like this:

osInstance.options({ overflow: { y: 'hidden' } });

This would make the vertical axis not scrollable.

I've created a small example for you: https://stackblitz.com/edit/stackblitz-starters-8dwqxu?description=The%20React%20framework%20for%20production&file=app%2Fpage.tsx,app%2Flayout.tsx,components%2FOverlayScrollbarsBody.tsx&title=Next.js%20Starter

[winkcor]

I found another solution that worked for me, it can also be disabled by setting this css code while the modal is open:
[data-overlayscrollbars-viewport~="overflowYScroll"] { overflow:hidden !important;}