iOS端弹出Popup/Overlay时无法禁用页面滚动问题求助

iPhone的Safari对body设置overflow:hidden的滚动拦截支持不佳，加上直接用position:fixed会导致页面跳回顶部，我们可以通过保存滚动位置+动态定位的方式解决：

修改后的实现代码 #

function NewPostPopup() {
    const popup = document.getElementById("newpostpopup");
    const isActive = popup.classList.toggle("active");
    const body = document.body;
    
    if (isActive) {
        // 记录当前滚动位置（兼容不同浏览器）
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        // 把滚动位置存在body的自定义属性里
        body.dataset.scrollTop = scrollTop;
        // 用fixed定位冻结页面，top值抵消滚动距离，避免跳顶
        body.style.position = "fixed";
        body.style.top = `-${scrollTop}px`;
        body.style.left = "0";
        body.style.width = "100%";
        body.style.overflow = "hidden";
    } else {
        // 读取之前保存的滚动位置
        const scrollTop = parseInt(body.dataset.scrollTop || "0");
        // 恢复body的默认样式
        body.style.position = "";
        body.style.top = "";
        body.style.left = "";
        body.style.width = "";
        body.style.overflow = "";
        // 滚动回之前的位置
        window.scrollTo(0, scrollTop);
    }
}

关键细节说明 #

• 保存滚动位置时，同时兼容window.pageYOffset和document.documentElement.scrollTop，覆盖PC和移动端的浏览器差异
• 设置position:fixed时必须指定width:100%，避免页面内容宽度收缩变形
• 关闭弹窗时先恢复body样式，再执行window.scrollTo，确保滚动位置准确恢复
• 如果弹窗自身需要滚动，给弹窗添加overflow-y:auto和max-height:100vh样式，保证弹窗内内容可正常滚动

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