在移动网络应用程序中，我经常使用模态框。
一些模态框可以扩大尺寸，因此可以滚动。
如何启用更高 z 索引的模态以可滚动并将背景 div 设置为不滚动？
b/c 每当我在当前模式上用两根手指滚动时，有时是背景滚动，有时是前景滚动。
【问题讨论】：
overflow 属性设置为hidden 用于您不想滚动的模态。如果您需要有关如何执行此操作的建议，请提供您的代码，我们可以为您提供建议。
标签： html css scroll mobile-website
我认为您无法使用 background-attachment: fixed; 修复背景
你必须在上面申请position: fixed
然后
你应该试试iScroll 4
“iScroll 终于得到了彻底的改写。现在它比以往任何时候都更流畅，并添加了一些新的重要功能：捏/缩放、下拉刷新、捕捉元素和更多自定义事件，以实现更高级别的 hackability。”
或
用于移动设备（Android、iOS 等）和桌面设备的独立视差滚动 JavaScript 库已缩小约 12k。
其他有用的链接
http://webdesigner-webdeveloper.com/weblog/fullscreen-images-for-the-ipad-ios-and-mobile-safari/
https://github.com/louisremi/background-size-polyfill/issues/27
http://bradfrostweb.com/blog/mobile/fixed-position/
希望这个答案对你有点帮助。 :)
【讨论】：
有几个“hacky”方法可以让这个工作。以下是我脑海中浮现的几个（我过去曾尝试过） - 如果您的目标是 iOS 设备，请直接跳到 #3...
1) 使用 JS 并防止滚动。您可能想检查模态中的元素是否可滚动。如果不是，则禁用触摸事件，阻止用户滚动。注意方向。此外，通常会“橡皮筋”滚动的设备将停止。
抱歉，没办法演示。
2) 对 body 元素应用绝对定位，并隐藏溢出。听起来很奇怪，如果将绝对位置应用于正文，则可以防止页面滚动。但是，布局问题可能会阻止您使用它。此外，当您将位置应用到 body 时，任何滚动偏移都将被移除，页面将滚动到 0,0。此外，页面仍然会橡皮筋（如果设备支持橡皮筋），从而导致奇怪的交互。
JS 小提琴：http://fiddle.jshell.net/L7FJF/show/
3) 如果您的目标是 iOS 设备（或 Android 上更新的 Chrome 浏览器），使用-webkit-overflow-scrolling: touch 和橡皮筋时有一个有趣的解决方法。使用 JS，您始终可以将可滚动的 div 偏移 +/-1px 以防止背景滚动。 （老实说，这是我最喜欢的解决方法，因为它运行良好。但是，它仅限于支持溢出滚动的 iOS。）
JS 小提琴：http://fiddle.jshell.net/jDqSP/show/
希望这会有所帮助！
【讨论】：
假设您希望允许滚动的唯一 div 是
<div class="scroll">...</div>
这里是代码。适用于ios和android，也处理了儿子滚动到结束时，会自动触发父滚动的问题。
$(document).on('touchmove', function(e) {
e.preventDefault();
}).ready(function() {
$('.scroll').on('touchstart', function(e) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.prevTop = null;
this.prevBot = null;
this.lastY = e.originalEvent.touches[0].clientY;
}).on('touchmove', function(e) {
var event = e.originalEvent;
var up = (event.touches[0].clientY > this.lastY), down = !up;
this.lastY = event.touches[0].clientY;
if ((up && this.allowUp) || (down && this.allowDown))
event.stopPropagation();
else
event.preventDefault();
});
});
当你不需要禁止滚动时，你只需像这样删除监听器：
document.addEventListener('touchmove', handleTouchMove, false);
document.removeEventListener('touchmove', handleTouchMove);
来自 https://stackoverflow.com/a/13278230/1982712 & prevent full page scrolling iOS （这是提问者自己的答案）。 （我的主账号被封了:()
【讨论】：