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

Question

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

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

谢谢

Answer 1

You have to add this to your CSS:

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

That works for me. See here: http://jsbin.com/isayuy/10/

Answer 2

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

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

http://jsbin.com/isayuy/6

如果我遗漏了一些明显的东西，请道歉。

祝你好运！

Answer 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) 来更新位置的调整大小事件。

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