15

我们使用 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'
    }
  }
};

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

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

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

9 回答 9

21

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

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

于 2013-07-03T21:14:22.433 回答
19

这对我来说很好用：

在 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
        }
    }
});

我希望它对你有用。

于 2014-04-09T08:32:50.247 回答
4

这对我有用：

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

希望能帮助到你 ：）

于 2013-07-02T01:25:15.127 回答
3

我猜？您单击以触发 fancybox 的选择器很可能是带有hashmarklike 的锚点：

<a href="#">

然后你href从最近的<a>元素中得到幻想框，就像你的代码一样：

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

这是一个重现您描述的行为的演示（向下滚动内容，直到找到触发 fancybox 的缩略图）

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

1）。hashmark将锚的href属性更改为hashtag #nogo类似<a href="#nogo">

正如Stuart Nicholls (cssplay)在 2005 年 3 月 15 日更新的链接帖子中所提到的。

2）。或者用like替换hashmark你的锚href属性中的javascript:;<a href="javascript:;">

使用第一个选项查看更新的 JSFIDDLE 。

于 2013-03-26T08:07:53.437 回答
1

我意识到这个问题已经被问过一段时间了，但我认为我已经找到了一个很好的解决方案。问题是花哨的盒子会改变 body 的溢出值以隐藏浏览器滚动条。

正如 SimCity 所指出的，我们可以通过添加以下参数来阻止花式盒子这样做：

$('.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;  
    }
于 2014-01-25T19:37:15.537 回答
0

你可以试试这个：-

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

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

}

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

于 2013-03-26T07:11:55.600 回答
0

在 jquery.fancybox.css -> .fancybox-lock
change:
overflow: hidden !important;
to:
overflow: visible !important;
works for me :)

于 2013-09-16T19:38:55.383 回答
0

我的修改，这对我有帮助

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});
于 2015-09-15T10:23:42.140 回答
0 
$('.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;
   .....
}
于 2016-04-25T14:11:28.140 回答