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

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

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

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

html5

阅读 474

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

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

5 个回答

得票最新

乔治

12.4k1329

发布于
今天 10:40 上海

更新于
今天 10:42

记录一下滚动的位置然后固定

const showModal = () => {
  const scrollTop = window.scrollY;
  
  document.body.style.position = 'fixed';
  document.body.style.width = '100%';
  document.body.style.top = `-${scrollTop}px`;
};

const hideModal = () => {
  const scrollTop = document.body.style.top;
  document.body.style.position = '';
  document.body.style.width = '';
  document.body.style.top = '';
  
  // 恢复滚动位置
  window.scrollTo(0, parseInt(scrollTop || '0') * -1);
};

或者用阻止默认事件：

let scrollPosition = 0;

const preventDefault = (e) => {
  e.preventDefault();
};

const disableScroll = () => {
  scrollPosition = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
  document.addEventListener('touchmove', preventDefault, { passive: false });
};

const enableScroll = () => {
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  window.scrollTo(0, scrollPosition);
  document.removeEventListener('touchmove', preventDefault);
};

CSS 方法：

.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
const showModal = () => {
  document.body.classList.add('modal-open');
};

const hideModal = () => {
  document.body.classList.remove('modal-open');
};

野蛮生长

112211

发布于
今天 15:54 美国

export const stopScroll = () => {
  var mo = function (e) {
    e.preventDefault();
  };
  document.body.style.overflow = "hidden";
  document.addEventListener("touchmove", mo, false);
};

export const canScroll = () => {
  var mo = function (e) {
    e.preventDefault();
  };
  document.body.style.overflow = "";
  document.removeEventListener("touchmove", mo, false);
};

查看全部 5 个回答

推荐问题

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

回答

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

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

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

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

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

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

H5 可以实现点击按钮保存图片到相册功能吗？

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

回答

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

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

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

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

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

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

H5 可以实现点击按钮保存图片到相册功能吗？

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