ios移动端 网站菜单栏下拉时禁止外部页面滚动

15 阅读1分钟
.scroll-disabled {
  overflow: hidden;
}
disableScroll() {
            if (this.isScrollDisabled) return;
            // 保存当前滚动位置
            this.scrollPosition = window.pageYOffset;
            // 添加CSS类来禁用滚动
            document.body.classList.add("scroll-disabled");
            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
            // iOS设备处理
            if (isIOS) {
                // 固定页面位置
                document.body.style.position = "fixed";
                document.body.style.top = `-${this.scrollPosition}px`;
                document.body.style.width = "100%";
                // 阻止触摸事件的默认行为
                document.addEventListener("touchmove", this.preventDefault, { passive: false });
            }
            this.isScrollDisabled = true;
        },
 enableScroll() {
  if (!isScrollDisabled) return;
  // 移除CSS类
  document.documentElement.classList.remove("scroll-disabled");
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  if (isIOS) {
    // 恢复页面位置和样式
    document.body.style.position = "";
    document.body.style.top = "";
    document.body.style.width = "";

    // 恢复滚动位置
    window.scrollTo(0, this.scrollPosition);

    // 移除事件监听器
    document.removeEventListener("touchmove", preventDefault);
  }

  isScrollDisabled = false;
}

目前页面要求菜单栏为全屏,主要问题就是菜单栏放下时,向下滑动如果单纯靠overflow来控 苹果safari的地址栏会下滑然后露出页面部分 通过这种方式可以解决问题 目前菜单栏放下时向下滑动菜单栏不会落下。