我怎樣才能讓顯示的元素接收到滾動事件？

Question

我創建了一個網站，我在其中創建了“頁面”。 每個頁面本質上都是一個包含嵌套元素的容器。 我在我的頁面上編碼了一個淡入淡出的效果，我將所有不可見的頁面設置為 0 不透明度，並將顯示容器的可見不透明度設置為 1。我有一個工作算法可以通過將不透明度從 1 轉換為 0 來切換頁面，然后很好地進行另一個頁面轉換。

然而，兩個頁面有一個像這樣的可滾動區域，

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

正在發生的是，可滾動區域事件僅在最后創建的 html 元素上接收，因為它位於頂部，不透明度為 0。因此，如果我無法在最后一個頁面之前創建的頁面上接收可滾動事件，盡管是只有可見的可滾動區域，它不接收事件。 我怎樣才能做到只有“可見”的 html 元素（即不透明度為 1）才能接收事件，而不是不可見元素。

Answer 1

您可以在 CSS 中使用 z-index 使滾動 div 位於您想要的那個之后，然后 position 使其像吞下它一樣Demo