How can I make it so that the displayed element receives the scroll events?

I have made a website where I have created “pages”. Each page is essentially a container with nested elements. I have coded a fading effect on my page where I set all non-visible pages to 0 opacity and the visible opacity of the displayed container to 1. I have a working algorithm that can switch pages by transitioning the opacity from 1 to 0 and then make another page transition nicely.

However, two pages have a scrollable area like so,

            <div id="x-container" style="opacity: 0;">
                <div id="x-content" class="container-fluid" style="overflow: scroll; overflow-x: hidden;">
                    ...
                </div>
            </div>

What is occuring is that the scrollable area events are only being received on the last created html element because it is on top, with an opacity on 0. Therefore if I cannot receive scrollable events on a page created before the last one, despite being the only visible scrollable area it is not receiving the events. How can I make it so that only the html elements that are “visible” i.e. opacity of 1 should receive the events, not the invisible elements.

Answer

You can use z-index in CSS to make the scrolling div behind the one you wanted then position it to make it like swallowing it Demo