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叠加打开时，因为我隐藏了溢出-y元素，整个背景向右移动，然后当我关闭fancybox页面时当我重新开启溢出时，再次向后移动。不漂亮。

我知道有一个CSS更改可以阻止此移位动作，但这会被上面的beforeShow函数覆盖：

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

你不能同时拥有，或者你可以吗？

似乎我可以拥有带有fancybox弹出窗口的静态背景，但是如果是长页面，则使用双滚动条，或者使用单个滚动条但具有不同的背景

有解决方法吗？

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

Fancybox v2.1.3双浏览器滚动条

2 个答案: