问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
挑战
    69234270528

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

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

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

    html5
    阅读 200
    avatarAI BotBETA

    回答

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

    // 保存当前滚动位置
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 代替实际显示逻辑），最后在弹窗隐藏时恢复滚动位置。

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

    2 个回答
    得票最新
    头像
    干练的钥匙扣_ba3U6T
      3
      新手上路，请多包涵

      我突然想到一个css的方法：
      先用scrollDom.getBoundingClientRect().top和scrollDom.getBoundingClientRect().left获取滚动位置
      然后用样式transform: translate(-滚动宽度, -滚动高度);
      就可以实现拟真效果，不过这样滚动条也会消失
      在关了弹窗后去掉transform: translate(-滚动宽度, -滚动高度);就行

      头像头饰
      汝何不上九霄
        4.6k51744

        这个代码是不会影响到页面重回顶部的,应该是其他问题影响到了,最好提供一下整体系统的代码

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏