手机端弹出层弹出时弹出层的内容滚动,同时禁止body内容滚动

最近做的一个项目,手机端的网站,请问弹出层弹出的时候禁止页面底下的body页面内容滚动,但是同时又需要弹出层里面额内容可以滚动,这种效果怎么实现,试过获取页面的scrollTop,然后弹出层出现后给也页面scrollTop()到滑动的位置,但是这种方法在安卓系统上(特别是小米)上运行不流畅,各位同行有没有好的方法可以解决呢?

我说下,不知道对不,就是给弹出层下面弄个遮罩层设置为position定位的,宽高都为100%;弹出层设置边界,让overflow为auto就可以了

请问现在问题解决了吗

兄台 我也遇到了相同的问题 啊 你解决了吗

不知道现在解决了么?用楼上的方法确实 整个页面会 跳到顶部去 引入iscroll.js倒是可以解决 但是 总感觉 这办法太。。。

可以 在弹出层弹出的时候 给body 加样式 height:100%;overflow:hidden;

LZ解决这个问题了吗?

body页面设置{overflow:hidden;height:100%},弹出层设置{overflow:auto}

在弹出层弹出的时候 给html和body 加样式 height:100%;overflow:hidden;很多人没有设置html的样式,所以导致不起作用!

html和body的height:100% 是写在css中的 overflow:hidden也都加了,但是浮层第一次弹出的时候 页面回到顶部了 浮层再弹出就不出现这种情况了,请问各位有没有遇到这种情况,怎么处理

用$(".mask").on('touchmove',function(event) { event.preventDefault(); }, false);把整个遮照都变成了不可移动后,虽然解决了弹出层滚动时.body不滚动,但是移到旁边body内容滚动时,body还是动了,然后再移到弹出层那里,结果弹出层获取焦点有点慢,不滚动了。要按三四下才可以。超级郁闷

后来我发现我自己人在我整个弹出层上外又加了一层,其实手先触到的是那一层,而不是touchmove所以,滚动的是那一层,所以不好做。

但在某种意义上,弹出层中滚动,不会影响body的滚动。

今天同样遇到这个难题,禁止页面滑动的话,直接将 body,html 的 overflow:hidden 就行,不用加上height: 100%;不然页面在第一次载入的时候就会跳转至顶部。但是还有一个问题就是在滑动弹出层时,底层的内容页也在变化,这个问题我还不知道怎么弄。

.ovfHiden{height:100%;overflow:hidden} //左侧弹出菜单 $(".conmun").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".leftNav").show(); }) $(".bgDiv").click(function(){ $('html,body').removeClass('ovfHiden'); //使网页恢复可滚 $(".leftNav").hide(); })

完美解决