如何防止在fancybox-2后面滚动页面 [英] how to prevent scrolling of page behind fancybox-2

问题描述

我们正在使用fancybox2来显示图像.一切正常，但是当在放大框中显示较大的图像时，后面的页面将滚动到顶部.关闭fancybox之后，用户必须向下滚动到打开该盒子的位置. fancybox2网站上的示例未显示此行为.我找不到，实现这一目标的区别在哪里.

We are using fancybox2 for displaying images. Everything works well, but when the larger image is displayed in the fancybox, the page behind scrolls to the top. After closing the fancybox the user has to scroll back downwards to the position, where he opened the box. The examples on the fancybox2 Site do not show this behaviour. I could not find out, where is the difference to make this happen.

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块中.

We are using fancybox2 as a module within require.js. The .fancybox() call is in a $(document).ready block.

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

There where 2 scrollbars and I hid one with css

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

推荐答案

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

Apparently, Fancybox changes the CSS property overflow on body element to hidden when a picture is showed. This causes the background to scroll back to the top. All you have to do is comment out the row saying overflow: hidden !important; in section .fancybox-lock in stylesheet jquery.fancybox.css.

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

这篇关于如何防止在fancybox-2后面滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！