H5 想禁止显示弹窗后，后面页面还能滚动怎么写？

H5 页面在移动设备中高度是超过一屏的，滚动底部后，点击按钮出现弹窗，此时后面的页面还能滚动，想禁止它的滚动,又不想页面重回头部怎么办？

 document.documentElement.style.overflow = 'hidden';
 document.body.style.overflow = 'hidden';

弹窗显示的时候，添加以下代码，虽然后面页面无法滚动了，但是页面重回顶部了
这里的弹窗是自己写的，不是引用的组件库，

阅读 203

回答

为了禁止页面滚动而不让页面重回头部，你可以在处理弹窗显示时，保存当前的滚动位置，并在弹窗隐藏时恢复这个位置。以下是一个示例代码：

// 保存当前滚动位置
const saveScrollPosition = () => {
    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
};

// 恢复到保存的滚动位置
const restoreScrollPosition = (position) => {
    window.scrollTo(0, position);
};

// 显示弹窗的函数
const showModal = () => {
    const scrollPosition = saveScrollPosition();
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
    // 可以在这里添加显示弹窗的逻辑
    console.log('Modal shown');

    // 示例：3秒后隐藏弹窗并恢复滚动位置
    setTimeout(() => {
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
        restoreScrollPosition(scrollPosition);
        console.log('Modal hidden');
    }, 3000);
};

// 示例：按钮点击事件绑定
document.getElementById('showModalButton').addEventListener('click', showModal);

在上面的代码中，saveScrollPosition 函数保存了当前的滚动位置，restoreScrollPosition 函数将页面滚动恢复到保存的位置。在 showModal 函数中，我们首先保存滚动位置，然后禁止页面滚动，显示弹窗（这里用 console.log 代替实际显示逻辑），最后在弹窗隐藏时恢复滚动位置。

这种方法确保了页面在显示弹窗时不会滚动到顶部，同时在弹窗隐藏后能够恢复到之前的位置。

H5 想禁止显示弹窗后，后面页面还能滚动怎么写？

回答

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

微信小程序支付成功后续的业务逻辑怎么处理？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

H5页面怎么判断当前iphone设备的具体型号，想区分是否是带灵动岛14pro及以上的机型？

如何获取任一层级的dom元素到指定上层dom的left、top属性？

H5 想禁止显示弹窗后，后面页面还能滚动怎么写？

回答

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

微信小程序支付成功后续的业务逻辑怎么处理？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

H5页面 怎么判断当前iphone设备的具体型号，想区分是否是带灵动岛14pro及以上的机型？

如何获取任一层级的dom元素到指定上层dom的left、top属性？

H5页面怎么判断当前iphone设备的具体型号，想区分是否是带灵动岛14pro及以上的机型？