解决 overflow:hidden 在IOS 上 失效的问题

其实 业务上经常会出现 在浏览器弹出一个 提示框 让用户输入一些东西
但是把 如果后面的 元素还能滚动的话 就给人一种 很不爽的感觉

建议 弹窗出现的时候禁止 body 内容滚动 用户体验就更好了

body{
	overflow:hidden;
}

让弹窗出来 设置 body的样式 overflow:hidden

弹窗消失的时候 再让body { overflow:auto};

这个我再 谷歌的模拟器上 挺好的 然后 使用微信自带的浏览器也是好端端的

但是测试那边 拿着收集自带的 和 一些其他的 浏览器app 不行 弹窗出来的时候还可以进行滚动

说明overflow hidden 失效了

就想着 当 弹窗出来的时候 让body也固定了 这样 就可以实现了 弹窗消失后 再重新让它回归正常

function noMove() {
    $("html body").css({
         "overflow": "hidden",
         "position":"fixed"
     });
 }
 
function canMove() {
     $("html body").css({
           "overflow": "auto"，
          	"position":"static"
       })
   }

当然 你加到 html 元素上也行 width:100%;height:100%;position:fixed;
但上面的虽然实现了 需求 但又带来了 新的问题 每次弹窗出来的时候 总是 定位在最上面 这个问题 我还在处理中

我找到方法了,html使用绝对定位，body使用相对定位就可以了，不滚动且保持当前位置
取自评论中网友的方法， 谢谢哈。
该朋友的博客地址。：
https://blog.csdn.net/weixin_46648362. 前端就是需要互帮互助。 共同努力

关注我 持续更新前端知识。