Javascript overflow-y：内部滚动div的隐藏IOS问题

我正在建立一个反应迅速的网站，有覆盖层从侧面滑出。问题是在移动这些覆盖需要能够滚动，但我不希望后面的页面滚动。桌面设置溢出：隐藏可以阻止页面滚动，但仍然允许滑出div滚动。但是，在IOS中，此属性不起作用。基本页面仍然可以滚动。我在下面创建了一个jsbin。有人能告诉我如何让黑色div在IOS上滚动，但阻止基本页面滚动吗？它可以在桌面上正常工作，但在移动设备上不能

---

谢谢

您必须将此添加到CSS中：

html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }

这对我很有用。请参见此处：

的解决方案对我有效

作为另一种选择，我想知道为什么不应用position:fixed-to-body标记，当滑出可见时

如果我遗漏了一些明显的东西，那就表示同意

---

祝你好运

我就是这么做的-这个解决方案可以防止背景滚动，同时保留初始位置（即不会跳到顶部）

---

这将导致问题，如果你调整大小（旋转手机），而滚动被阻止；我还有一个resize事件，在这种情况下调用preventScroll（false），然后调用preventScroll（true）来更新位置。

是。它正在工作。并且还添加了以下代码

if (window.location == window.parent.location &&
    navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#orderpop').attr('style', 
                        '-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}

preventScroll : function(prevent) {
    var body = $('body'), html = $('html'), scroll;
    if (prevent) {
        var width = body.css('width');
        scroll = window.pageYOffset;
        // This is all you need to do to prevent scroll on everything except iOS.
        html.css({ 'overflow': 'hidden'});
        // For iOS, change it to fixed positioning and make it in the same place as
        // it was scrolled.
        // For all systems, change max-width to width; this prevents the page getting
        // wider when the scrollbar disappears.
        body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
    } else {
        scroll = -parseInt(body.css('top'));
        html.css({ 'overflow': '' });
        body.css({ 'position': '', 'top': '', 'max-width': '' });
        window.scrollTo(0, scroll);
    }
}

---

根据你想要停止整个身体、某些元素（但保留其他元素，如滚动div）等的不同，有几种方法可以停止弹跳。请参阅其他线程，以深入讨论问题和可能的解决方案。David Taiaroa的建议为我解决了弹跳问题。我在html选择器中添加了固定的位置，或者div中的滚动不再平滑。因此，如果您快速滑动，那么页面应该平稳地保持滚动一段时间。

if (window.location == window.parent.location &&
    navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#orderpop').attr('style', 
                        '-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}

preventScroll : function(prevent) {
    var body = $('body'), html = $('html'), scroll;
    if (prevent) {
        var width = body.css('width');
        scroll = window.pageYOffset;
        // This is all you need to do to prevent scroll on everything except iOS.
        html.css({ 'overflow': 'hidden'});
        // For iOS, change it to fixed positioning and make it in the same place as
        // it was scrolled.
        // For all systems, change max-width to width; this prevents the page getting
        // wider when the scrollbar disappears.
        body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
    } else {
        scroll = -parseInt(body.css('top'));
        html.css({ 'overflow': '' });
        body.css({ 'position': '', 'top': '', 'max-width': '' });
        window.scrollTo(0, scroll);
    }
}