Fancybox导致出现滚动条

Question

我以前曾经成功使用过fancybox，但是在我的最新设计中，fancybox导致出现滚动条，即单击图像，图像显示在窗口的中间，而窗口本身则获得了滚动条。 当更改窗口大小或字体大小时，我的布局流畅并且可以调整。 然后，使用fancybox，整个页面会在没有明显原因的情况下移动和重新缩放，这看起来很糟糕，而且还使用了处理器功能。

这可能是什么原因？

而且，背景也不会变暗... fancybox通常会做什么以实现此目的，为什么我的设计会失败？

以下是一些代码段：

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox').fancybox();
});
</script>

<div id="wrapper">
<div id="classes" class="post">
<h2>料理教室・ワークショップ</h2>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/1.jpg">フォトス</a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/2.jpg"></a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/3.jpg"></a>
</div>
</div>

#classes {
    width:40%;
    position:absolute;
    left:5%;
    bottom:10%;
    background-color:#fff;
    padding:1em;
    opacity:0.65;
    box-shadow:2px 2px 3px #555;
}

Answer 1

尝试这个：

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

而且，如果您使用的是“超大尺寸”之类的全屏背景，则可能要将其也添加到页面的CSS中：

html {overflow: -moz-scrollbars-vertical; overflow: scroll;}

Answer 2

正如Rob和Eva回答的那样，将帮助程序代码添加到Java脚本中conf对我有用

这是我的完整代码

        $(document).ready(function() {
            $(".fancybox").fancybox({
                maxWidth        : 800,
                maxHeight   : 500,
                fitToView       : true,
                width       : '100%',
                height      : '100%',
                autoSize        : true,
                closeClick      : true,
                openEffect  : 'elastic',
                closeEffect : 'elastic',
                helpers : {
                overlay : {
                    locked : false
                }
            }

            });
        });

Answer 3

Fancybox使用类fancybox-overlay来显示叠加层：

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

overflow-y:scroll属性使滚动条出现。 把它拿出来，你会被分类。

此外，你可能没有包括fancybox_overlay.png在同一文件夹中的fancybox css文件。 覆盖背景是从该文件创建的。 希望这些信息对您有所帮助