1

当我单击加载 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>

问题

4

4 回答 4

3

滚动条被移除是因为 jquery.fancybox.pack.js 会在显示花式框时通过类将属性添加overflow: hidden;到<body>元素.fancybox-lock中。有几种方法可以处理这个问题。

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

于 2013-09-11T02:25:41.647 回答
0

正如 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", "");
于 2013-11-07T15:52:34.700 回答
0

我有完全相同的问题。这是您需要做的：

1) 使用此选项启动 Fancybox：

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

2）在fancybox css之后执行的任何css文件中添加这一行

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

这将使 Fancybox 在不改变整个网站的情况下打开和关闭，并且不会影响 html 或 body 标签的溢出（当 html 标签中存在fancybox-lock 类时，它只会设置'overflow-y：scroll'）

于 2015-09-24T19:25:28.590 回答
0

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

if ($( "body", window.parent.document ).hasClass( "compensate-for-scrollbar" ) ) {
   $( "body", window.parent.document ).removeClass( "compensate-for-scrollbar" );
}
于 2019-07-16T14:20:56.613 回答