Question

当我点击加载Fancybox的链接时，整个背景页面会向右移动，以删除滚动条。我尝试在其他论坛中添加此JS，但没有运气。下面是一个链接（点击一个品牌标题），不知道为什么会删除滚动条。

我加载了像

这样的对象

<div class="fancybox-hidden" style="display:none;">
                          <div id="post-<?php the_ID(); ?>" class="brand_list" style="width:800px !important;">
                            <h2>The Beers</h2>
                            <div class="beers">
                                <?php the_content(); ?>
                                <div class="clear"></div>
                            </div>
                          </div>
                        </div>

我尝试过的修复

 <script type="text/javascript">
        $(".fancybox").fancybox({
        helpers: {
            title: {
                type: 'outside'
            },
            overlay: {
                locked: false
            }
        }
        }); 
        </script>

The Issue

Answer 1

正在移除滚动条，因为只要显示fancybox，jquery.fancybox.pack.js就会通过类overflow: hidden;将属性<body>添加到.fancybox-lock元素。有几种方法可以解决这个问题。

1）修改jquery.fancybox.pack.js中的javascript，以便在显示fancybox时不将此类添加到body元素。
2）修改jquery.fancybox.css中的css（第169行），不要为overflow: hidden;选择器添加.fancybox-lock属性。
3）在你自己的一个css文件中，以及身体上溢出属性的!important声明覆盖fancybox css（即body { overflow: auto !important; }）。
4）直接在overflow: auto;标记上添加<body>作为内联样式。

Answer 2

正如BigMacAttack所述，问题是overflow: hidden元素添加了<body>样式。这将从正文中删除滚动条并阻止滚动。

然而，接受overflow: hidden的解决方案是通过额外的填充来补偿额外的主体宽度（由于丢失滚动条）。只需在打开叠加层之前保存您的身体宽度，并在需要时添加额外的填充。

// before opening
var originalWidth = $('body').width(); 

// when open
if ($('body').width() > originalWidth) {
    $('body').css("padding-right", ($('body').width() - originalWidth) +"px");
}

// after closing
$('body').css("padding-right", "");

Answer 3

我有完全相同的问题。以下是您需要做的事情：

1）使用此选项启动Fancybox：

helpers:{overlay: {css: {'overflow': hidden}}}

2）在fancybox css

之后执行的任何css文件中添加此行

html.fancybox-lock {overflow-y: scroll !important}

这将使Fancybox在不改变整个网站的情况下打开和关闭并且不会影响html或正文标记的溢出（它只会设置＆＃39; overflow-y：滚动＆＃39;当html标签中存在fancybox-lock类时）

Answer 4

对于将iframe与fancybox结合使用的人，这会将滚动条放回您的主页上

if ($( "body", window.parent.document ).hasClass( "compensate-for-scrollbar" ) ) {
   $( "body", window.parent.document ).removeClass( "compensate-for-scrollbar" );
}

Fancybox删除滚动，移动页面

4 个答案: