css - Stop element underneath fixed overlay from scrolling with Tailwind

Question

I'm trying to create an overlay that may contain its own scrollbar. The overlay should take up the full width and height of the screen, and scroll its own contents if they are longer than the page height.

My problem is I can't figure out how to stop the actual page from scrolling when the overlay scrolls. I want this to act like a Bootstrap modal.

Here is the fiddle with a code example: https://jsfiddle.net/r5jLcekb/

In the example, I'm using:

fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll

As you can see, the page scrolls it's contents, not just the overlay. I only want the contents within the overlay to scroll. Is this possible to do purely with tailwind?

question from:https://stackoverflow.com/questions/65864936/stop-element-underneath-fixed-overlay-from-scrolling-with-tailwind

Answer 1

Waitting for answers