如何在打开 fancybox 时启用父文档的滚动？

Question

我想要一个 fancybox 出现，但仍然能够在父页面上上下滚动。

有办法吗？

我的 Fancybox 定义：

// Fancy box to appear when user scrolls below video
            $(".fancybox").fancybox({
                autoSize:false,
                modal:false,
                width:400,
                height:'auto',
            });

Answer 1

您需要设置 CSS 规则来覆盖 fancybox 的规则：

html.fancybox-lock, html.fancybox-lock body {
    overflow: visible !important;
}

html.fancybox-lock body .fancybox-overlay{
    overflow: hidden !important;
}

Answer 2

Fancybox 在其 API 中提供该功能，无需覆盖任何 CSS 规则

只需将 helpers 选项添加到您的脚本中，例如

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    // API options
    helpers: {
      overlay: {
        locked: false // allows to scroll the parent page
      }
    }
  }); // fancybox
}); // ready

DEMO

如何在打开 fancybox 时启用父文档的滚动？

How can I enable scrolling of the parent document while fancybox is opened?

jquery

fancybox