0

我在样式表中有以下设置，以确保每个页面宽度基本相同，因此事情不会在“短”页面上移动：html { overflow-y:scroll; }

使用fancybox v2.1.3 时，为了防止长fancybox iframe 页面上出现双滚动条，我使用以下内容：

$(".modal").fancybox({
            width   : '520',
            height  : 'auto',
            fitToView   : false,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow: function(){
            $("html").css({'overflow-y':'hidden'});
            },
            afterClose: function(){
            $("html").css({'overflow-y':'visible'});
            },
            helpers : {
                overlay : {
                    css : {
                        'background' : 'rgba(255, 255, 255, 0.9)'
                    }
                }
            }
        });

请注意上面的以下内容，它会在 fancybox 触发时关闭滚动条：

beforeShow: function(){
    $("html").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("html").css({'overflow-y':'visible'});
},

哪个有诀窍，然后产生的问题是，当 Fancybox 覆盖打开时，因为我隐藏了 overflow-y 元素，整个背景向右移动，然后当我关闭 fancybox 页面时，它再次移动回来当我重新打开溢出-y 时。不漂亮。

我知道有一个 CSS 更改来阻止这种移位运动，但这被上面的 beforeShow 函数覆盖：

body.fancybox-lock{
    overflow:visible !important;
    margin-right:auto !important;
}

你不能两者兼得，或者你可以吗？

似乎我可以有一个带有fancybox弹出窗口的静态背景，但如果长页面则有双滚动条，或者有一个滚动条但有移动背景

有解决方法吗？

4

2 回答 2

3

如果我正确理解您的问题，您可以通过在您的 Fancybox 配置中添加以下选项来禁用 Fancybox 的覆盖锁定功能：

helpers : {
    overlay : {
        locked : false
    }
}

然后你可以使用html { overflow-y:scroll; }没有任何冲突。

缺点是如果用户滚动他们的鼠标滚轮，页面现在将在 Fancybox 覆盖层下方滚动。

于 2013-02-20T06:07:50.140 回答
0

在您的 CSS 中，使用：

body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }

并不是：

html body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }

于 2013-09-17T17:15:09.227 回答