Fancybox v2.1.3 双浏览器滚动条

Question

我在样式表中设置了以下设置，以确保每个页面宽度基本相同，因此不会在“短”页面上移动：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;
}

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

似乎我可以使用带有花式框弹出窗口的静态背景，但如果页面较长，则可以使用双滚动条，或者可以使用单滚动条但具有移动背景

有解决办法吗？

Answer 1

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

helpers : {
    overlay : {
        locked : false
    }
}

那么你就可以使用html { overflow-y:scroll; }而不会产生任何冲突。

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

Answer 2

在你的 CSS 中，使用：

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

而不是：

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