如何防止后面的fancybox-2页的滚动(how to prevent scrolling of

我们使用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（）调用在$（文件）。就绪块。

其中有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:

这为我工作：

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

希望能帮助到你 ：）

Answer 4:

我猜？ 选择您按一下火的fancybox是最有可能与一个锚hashmark这样的：

<a href="#">

那么你得到的fancybox的href从最近<a>元素，如在你的代码：

  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  }

这里是一个DEMO再现您所描述的行为（滚动内容，直到你发现火灾的fancybox缩略图）

如果我上面所说的假设是正确的，那么你可能的解决方案是：

1）。 变化hashmark在你的锚的href属性的hashtag #nogo像<a href="#nogo">

被称为由斯图尔特·尼科尔斯（cssplay）中的链接后在他2005年3月15日的更新。

2）。 或更换hashmark在你的锚的href通过属性javascript:; 像<a href="javascript:;">

请参阅更新的jsfiddle使用第一个选项。

Answer 5:

我意识到这个问题已经被问前一段时间，但我想我已经找到了它一个很好的解决方案。 问题是，看中箱变，以隐藏浏览器滚动体的溢出值。

由于模拟城市所指出的，我们可以通过添加以下参数做这个停止看中框：

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

但是，现在我们可以一边看着我们看中框窗口滚动的主页。 它比跳转到页面顶部更好，但它可能不是我们真正想要的。

我们可以防止添加下一个参数滚动的正确方法：

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

而从galambalaz添加这些功能。 请参阅： 如何禁用暂时滚动？

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

Answer 6:

你可以试试这个： -

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

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

} 

它停止父页面上垂直滚动，而的fancybox是开放的。

Answer 7:

在jquery.fancybox.css - > .fancybox锁
更改：
overflow: hidden !important;
至：
overflow: visible !important;
为我工作:)

Answer 8:

我的修改，这帮助我

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});

Answer 9:

$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

在fullPage.js

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}

文章来源: how to prevent scrolling of page behind fancybox-2