防止移动屏幕上的对话框滚动正文

Question

我在移动屏幕上显示一个比屏幕大小更长的对话框(因此它会滚动).

这是问题所在:当你滚动到对话框的底部时(我碰巧使用的是Bootstrap 3),我希望它能够停止.相反,它开始滚动底层的身体.我已经试过这就是被认为在一切这个推荐的解决方案,它仍然不会再用的工作!

这是关于JSbin问题的现场演示,为您带来观赏乐趣

http://jsbin.com/EdAhAsU/1/

注意:要重现此问题,请使用移动设备(任何移动设备)访问该设备,并尝试滚动浏览对话框的末尾.在Android和iPhone上尝试过它 - 对两者都不起作用.

谢谢!

Answer 1

试试这个:

body {
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 100%;
}

在iOS 7的Safari/Chrome中适用于我(请参阅http://jsbin.com/aXoMaGo/2),同时也为Modal提供了性感的反弹效果.

有效的最终解决方案(即使解除对话框):https://jsbin.com/aXoMaGo/6.唯一的缺点是,每次模态被解除时它都会滚动到页面的顶部.