jquery - 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 页面时它当我重新打开 overflow-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; 没有任何冲突。

缺点是，如果用户，例如滚动鼠标滚轮。