移动端禁止页面滚动，超简单

2023-08-13 03:02| 来源: 网络整理| 查看: 265

先说说我自己需求：点击顶部菜单按钮会弹出菜单选项，然后背景有一个遮罩效果，此时菜单选项出现要求禁止页面滚动，关闭才能继续滚动

解决：因为即使加了遮罩如果页面高度大于手机高度默认还是可以滚动的，网上有很多解决方法，我也看过试过，有些还要计算已经滚动的高度，因为有个方法是禁用了会自动弹回顶部，大概网上方法有：

方法1：设置监听事件，阻止默认事件行为 bug->遮罩弹出页面自动置顶，需要计算滚动距离，烦 $("body").css({ 　　position: "fixed", 　　width: "100%" }); document.body.addEventListener("touchmove", bodyScroll, false); function bodyScroll(event) { 　　event.preventDefault(); } 方法2：加这个 document.body.addEventListener("touchmove", bodyScroll, { passive: false }); function bodyScroll(event) { 　　event.preventDefault(); } passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。对比第一个，就不需要设置body样式了有个问题：移除事件移除不了，没效果.. 方法3.以后页面布局固定顶部尽量不用fixed,用abosulte 中间内容滚动就好，禁用html滚动，不适用我这里

最后我自个想了想，解决问题还是得看源头，就是滚动条怎么来的，默认是受哪个元素控制的，之前一直以为是body, 其实是html元素，html设置100%高就没有默认滚动条了呀

所以：这样不就行了么，亲测有效啊，而且不用计算高度那些，美滋滋，暂时没发现这样会出什么问题，所以我这样做了。

// 关闭菜单去掉禁止 $("html").css({ overflow: "auto", height: 100% }); // 禁止滚动 $("html").css({ overflow: "hidden", //height: 100% }); }

【本文地址】

公司简介

联系我们