jquery - 如何防止fancybox-2后面的页面滚动

Question

我们使用 fancybox2 来显示图像。一切都运行良好，但是当较大的图像显示在 fancybox 中时，后面的页面会滚动到顶部。关闭 fancybox 后，用户必须向下滚动回到打开该框的位置。 fancybox2 网站上的示例未显示此行为。我无法找出实现这种情况的区别在哪里。

fancyOptions = {
  type: 'image',
  closeBtn: false,
  autoSize: false,
  scrolling: 'no',
  type: 'image',
  padding: [10,10,10,10],  
  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  },
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.7)'
      },
    },
    title: {
      type: 'inside'
    }
  }
};

我们使用 fancybox2 作为 require.js 中的模块。.fancybox() 调用位于 $(document).ready block 中。

那里有 2 个滚动条，我用 css 隐藏了一个

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

Answer 1

显然，当显示图片时，Fancybox 会将 body 元素上的 CSS 属性 overflow 更改为 hidden。这会导致背景滚动回顶部。您所要做的就是注释掉样式表 jquery.fancybox.css 的 .fancybox-lock 部分中的 overflow: hide !important; 行>.

请参阅fancybox2 / fancybox causes page to to jump to the top也是如此。