溢出-y：内部滚动div的隐藏IOS问题答案

【问题标题】：overflow-y:hidden IOS issue with inner scrolling div溢出-y：内部滚动div的隐藏IOS问题
【发布时间】：2013-06-22 21:09:06
【问题描述】：

我正在构建一个响应式站点，该站点具有从侧面滑出的叠加层。问题出在移动设备上，这些叠加层需要能够滚动，但我不希望后面的页面滚动。在桌面设置溢出：隐藏可阻止页面滚动，但仍允许滑出 div 滚动。但是，在 IOS 中，此属性不起作用。基本页面仍然是可滚动的。我在下面创建了一个 jsbin。有人能告诉我如何让黑色 div 在 IOS 上滚动但防止基本页面滚动吗？它在台式机上运行良好，但在移动设备上却不行。

http://jsbin.com/isayuy/4/

谢谢

【问题讨论】：

标签： javascript ios webkit responsive-design mobile-safari

【解决方案1】：

您必须将其添加到您的 CSS 中：

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

这对我有用。见这里：http://jsbin.com/isayuy/10/

【讨论】：

有一些替代方法可以停止弹跳，具体取决于您想要停止整个身体、某些元素（但保留其他元素，例如可滚动的 div）等。请参阅此其他线程以深入了解讨论问题和可能的解决方案。 stackoverflow.com/questions/12663576/…
David Taiaroa 的建议为我解决了弹跳问题。我将固定位置添加到 html 选择器
div中的滚动不再流畅。因此，如果您快速滑动，页面应该会平稳地滚动更长的时间。

【解决方案2】：

@Tim Wasson 的解决方案对我有用。

作为另一种选择，我想知道当滑出可见时您是否有理由不应用 position:fixed 到 body 标签？

http://jsbin.com/isayuy/6

如果我遗漏了一些明显的东西，敬请原谅。

祝你好运！

【讨论】：

【解决方案3】：

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

    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);
        }
    },

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

【讨论】：

【解决方案4】：

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

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);
    }
}

【讨论】：