如何实现JavaScript弹窗仅在会话内滚动到顶部时显示一次？

问题说明 #

编写了JavaScript弹窗代码，需求为弹窗仅在用户滚动回页面顶部时出现，且每个会话仅显示一次。目前已实现滚动到顶部触发弹窗，但弹窗每次滚动到顶部都会出现，未实现会话内仅显示一次的效果。

问题原因 #

原代码中虽然使用了sessionStorage标记弹窗已显示，但滚动事件监听并未在弹窗触发后移除，且触发弹窗的逻辑没有在每次滚动到顶部时先校验sessionStorage状态，导致每次滚动回顶部都会重复执行弹窗创建代码。

修复后的代码 #

<script>
// 检查当前会话中弹窗是否已显示
if (!sessionStorage.getItem('popupShown')) {
    // 定义滚动事件处理函数
    function handleScroll() {
        if (window.pageYOffset === 0) {
            // 再次校验，避免重复触发
            if (!sessionStorage.getItem('popupShown')) {
                var popup = document.createElement("div");
                popup.style.position = "fixed";
                popup.style.top = "0";
                popup.style.left = "0";
                popup.style.zIndex = "999";
                popup.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
                popup.style.width = "100vw";
                popup.style.height = "100vh";
                popup.style.display = "flex";
                popup.style.alignItems = "center";
                popup.style.justifyContent = "center";
                
                var innerPopup = document.createElement("div");
                innerPopup.style.backgroundColor = "black";
                innerPopup.style.display = "flex";
                innerPopup.style.flexDirection = "column";
                innerPopup.style.alignItems = "center";
                innerPopup.style.justifyContent = "center";
                innerPopup.style.padding = "40px";
                innerPopup.style.margin = "35px";
                innerPopup.style.borderRadius = "25px";

                var img = document.createElement("img");
                img.src = "https://digitalcloud.co.za/wp-content/uploads/2023/01/kerridge_pop_up_illustration.png";
                img.alt = "Find out about Kerridge’s core solution";
                img.style.width = "25%";
                img.style.cursor = "pointer";
                innerPopup.appendChild(img);

                var text = document.createElement("p");
                text.innerHTML = "Interested to find out more about our core solution?";
                text.style.color = "white";
                text.style.marginTop = "50px";
                text.style.textAlign = "center";
                text.style.fontSize = "20px";
                innerPopup.appendChild(text);

                var button = document.createElement("button");
                button.innerHTML = "Book a free demo today";
                button.style.backgroundColor = "#E8017B";
                button.style.color = "white";
                button.style.fontSize = "20px";
                button.style.padding = "15px";
                button.style.borderRadius = "50px";
                button.style.border = "none";
                button.onclick = function() {
                    location.href = "https://digitalcloud.co.za/";
                }
                innerPopup.appendChild(button);
                
                var secondText = document.createElement("p");
                secondText.innerHTML = "Stay up to date with the latest Kerridge product updates and existing announcements";
                secondText.style.color = "white";
                secondText.style.marginTop = "50px";
                secondText.style.textAlign = "center";
                secondText.style.fontSize = "20px";
                innerPopup.appendChild(secondText);
                
                var secondButton = document.createElement("button");
                secondButton.innerHTML = "Sign up to our Newsletter";
                secondButton.style.color = "#E8017B";
                secondButton.style.background = "transparent";
                secondButton.style.border = "none";
                secondButton.style.fontSize = "20px";
                secondButton.onclick = function() {
                    location.href = "https://digitalcloud.co.za/";
                }
                innerPopup.appendChild(secondButton);

                var closeBtn = document.createElement("div");
                closeBtn.style.position = "absolute";
                closeBtn.style.top = "50px";
                closeBtn.style.right = "50px";
                closeBtn.style.cursor = "pointer";
                closeBtn.style.width = "60px";
                closeBtn.style.height = "60px";
                closeBtn.style.borderRadius = "50%";
                closeBtn.style.backgroundColor = "#E8017B";
                closeBtn.style.display = "flex";
                closeBtn.style.alignItems = "center";
                closeBtn.style.justifyContent = "center";

                closeBtn.setAttribute("tabindex", "0");
                closeBtn.setAttribute("role", "button");
                closeBtn.setAttribute("aria-label", "Close");

                closeBtn.addEventListener("click", function() {
                    popup.remove();
                });

                closeBtn.addEventListener("keydown", function(event) {
                    if (event.key === "Enter" || event.key === " ") {
                        popup.remove();
                    }
                });

                var closeX = document.createElement("div");
                closeX.innerHTML = "X";
                closeX.style.color = "white";
                closeX.style.fontWeight = "bold";

                closeBtn.appendChild(closeX);
                closeBtn.onclick = function() {
                    popup.remove();
                }
                innerPopup.appendChild(closeBtn);

                popup.appendChild(innerPopup);
                document.body.appendChild(popup);
                
                // 标记弹窗已在当前会话显示
                sessionStorage.setItem('popupShown', 'true');
                // 移除滚动事件监听，避免后续滚动到顶部再次触发
                window.removeEventListener('scroll', handleScroll);
            }
        }
    }
    // 添加滚动事件监听
    window.addEventListener('scroll', handleScroll);
}
</script>

关键修复点 #

• 将滚动事件处理函数单独定义，便于弹窗触发后移除监听
• 在滚动到顶部的逻辑中，再次校验sessionStorage状态，防止重复触发
• 弹窗显示并标记sessionStorage后，立即移除滚动事件监听，彻底避免后续触发

内容的提问来源于stack exchange，提问作者Arya Prem