Question

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

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

由于

Answer 1

你必须将它添加到你的CSS：

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

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

Answer 2

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

作为另一种选择，我想知道是否有一个原因，你不应用位置：当滑出部分可见时固定到身体标签？

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）的resize事件，然后在这种情况下使用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);
    }
}

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

4 个答案: