.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的地址栏会下滑然后露出页面部分 通过这种方式可以解决问题 目前菜单栏放下时向下滑动菜单栏不会落下。