2 yanjie991 YANjie991 于 2015.07.28 11:05 提问

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

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

13个回答

aq10046810
aq10046810   2016.06.19 20:30

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

lsy0125
lsy0125 回复lsy0125: 。。,手机端还是有问题的
5 个月之前 回复
lsy0125
lsy0125 问题解决
5 个月之前 回复
qq389216533
qq389216533 回复dinglianxiu: 这种方式可行,html 和body都要加样式,单单加一个不行
7 个月之前 回复
dinglianxiu
dinglianxiu 请问你测试过吗?就发上来,,根本不行好吧,,
8 个月之前 回复
qq_21058391
qq_21058391 正确的
大约一年之前 回复
nianzhilian
nianzhilian   2016.03.15 14:37

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

dinglianxiu
dinglianxiu 这样写在移动端根本行不通,,
8 个月之前 回复
qq_34879910
qq_34879910 用$(".mask").on('touchmove',function(event) { event.preventDefault(); }, false);把整个遮照都变成了不可移动后,虽然解决了弹出层滚动时.body不滚动,但是移到旁边body内容滚动时,body还是动了,然后再移到弹出层那里,结果弹出层获取焦点有点慢,不滚动了。要按三四下才可以。超级郁闷
一年多之前 回复
qq_34879910
qq_34879910 不管是html+body加这个都没用,该滚的还得滚
一年多之前 回复
qq_35451568
qq_35451568 移动端没效果 谷歌的手机模拟器可以。
一年多之前 回复
xieyida
xieyida 这样也并没有什么卵用,试过了。
一年多之前 回复
honely1314
honely1314   2016.06.17 11:07

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

wangzichao0107
wangzichao0107   2015.07.28 11:52

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

YANjie991
YANjie991 回复江天暮雪: 这个会让页面置顶。。。。
2 年多之前 回复
wangzichao0107
wangzichao0107 回复潔潔: 0.0,试一下这个document.documentElement.style.overflow = ‘hidden';
2 年多之前 回复
YANjie991
YANjie991 是这样做得,我说得现在的问题是弹出层里面的内容滑动的时候下面body的内容也回滚动,就是要禁止body的页面滚动。。。
2 年多之前 回复
bingnuoyuan
bingnuoyuan   2015.11.10 21:23

请问现在问题解决了吗

qq_20374055
qq_20374055   2015.12.06 20:47

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

dyu321
dyu321   2015.12.18 09:49

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

xieyida
xieyida   2016.05.09 10:49

LZ解决这个问题了吗?

Tiny_6
Tiny_6   2016.06.29 15:48

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

qq_38204639
qq_38204639 我的也是这种情况,第一次会跳转,然后就不会回到顶部了,请问你后来是怎么解决的?
8 个月之前 回复
qq_34879910
qq_34879910   2016.08.23 14:39

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

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

共13条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片