如何防止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块中.

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

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

Answer 1

显然,改变的fancybox的CSS属性overflow的body元素hidden拍摄照片时显示.这会导致背景滚动回到顶部.您所要做的就是在样式表的overflow: hidden !important;部分.fancybox-lock中注释出行jquery.fancybox.css.

请参阅 fancybox2/fancybox导致页面也跳转到顶部.

Answer 2

这对我来说很好:

在facnybox初始化中添加以下功能

beforeShow: function(){
    $("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("body").css({'overflow-y':'visible'});
}

例:

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

我希望它对你有用.

Answer 3

你可以尝试这个：-

beforeShow: function(){
 $("body").css({'overflow-y':'hidden'});
},

afterClose: function(){
 $("body").css({'overflow-y':'visible'});

} 

当 fancybox 打开时，它会停止父页面上的垂直滚动。