Question

在移动网络应用程序中，我经常使用模态。

某些模态可以扩展尺寸，因此可以滚动。

如何启用更高级的z-indexed模式以进行滚动并将背景div设置为不滚动？

b / c每当我用两根手指在当前模态上滚动时，有时候是背景滚动，有时是前景滚动。

Answer 1

我认为您无法使用background-attachment: fixed;修复背景你必须在其上申请position: fixed 然后

您应该尝试 iScroll 4

“iScroll终于完成了重写。现在它比以往更顺畅了，并添加了一些新的重要功能：捏合/缩放，下拉刷新，捕捉元素和更多自定义事件，以获得更高的黑客攻击性。”

或

<强> skrollr 0.6.25

独立的视差滚动JavaScript库，适用于移动设备（Android，iOS等）和桌面，大约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/

希望这个答案对你有所帮助。：）

Answer 2

有一对＆＃34; hacky＆＃34;如何使这项工作。以下是我最喜欢的一对（我过去曾经尝试过） - 如果您要定位iOS设备，请跳到＃3 ......

1）使用JS并阻止滚动。您可能想要检查模态中的元素是否可滚动。如果不是，则禁用触摸事件，阻止用户滚动。注意方向。此外，通常＆＃34; rubberband＆＃34;滚动将停止。

对不起，没有小提琴演示。

2）对隐藏溢出的body元素应用绝对定位。虽然听起来很奇怪，但如果将绝对位置应用于正文，则可以阻止页面滚动。但是，布局问题可能会阻止您使用它。此外，当您将位置应用于正文时，将删除任何滚动偏移，页面将滚动到0,0。此外，页面仍将是橡皮带（如果设备支持橡皮筋），导致奇怪的交互。

JS小提琴：http://fiddle.jshell.net/L7FJF/show/

3）如果您定位iOS设备（或Android上较新的Chrome浏览器），使用-webkit-overflow-scrolling: touch和橡皮筋时，有一个有趣的解决方法。使用JS，您始终可以抵消可滚动div +/- 1px以防止背景滚动。（说实话，这是我最喜欢的工作，因为它工作得很好。但是，它仅限于iOS w / overflow-scrolling支持。）

JS小提琴：http://fiddle.jshell.net/jDqSP/show/

希望这有帮助！

Answer 3

假设您想要滚动的唯一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＆amp; prevent full page scrolling iOS （这是提问者自己的答案）。（我的主要帐户已被禁止:(）

如何在移动Web应用程序中禁用背景div上的滚动

3 个答案: