108

我已经在开发网站上实现了 fancybox2。

当我使用花式框（单击链接等）时，整个 html 会移到它后面 - 并移到顶部。我在另一个演示中运行良好，但是当我将相同的代码拖到这个项目时，它会跳到顶部。不仅有内联 div 的链接，还有简单的图片库。

有没有人经历过这个？

4

11 回答 11

337

这实际上可以通过 Fancybox 2 中的助手来完成。

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

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

于 2013-03-09T03:37:38.830 回答
35

Jordanj77 是正确的，但最简单的解决方案是转到样式表jquery.fancybox.css并注释掉overflow: hidden !important;部分中的行.fancybox-lock

于 2013-07-03T21:10:22.887 回答
14

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

正如 Dave Kiss 指出的那样，我们可以通过添加以下参数来阻止花哨的盒子这样做：

$('.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:24:59.157 回答
9

问题是 fancyBox 改变了 body 的溢出值以隐藏浏览器滚动条。我找不到切换此行为的选项。

您可以删除这部分 fancyBox 代码来阻止它：

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
于 2012-11-25T05:02:53.637 回答
7

尽管解决这个问题的正确方法是通过fancybox提供的选项（参考这个答案），但CSS可以用来解决这个问题。无需编辑库的 css 文件，只需将其添加到应用程序的主样式表中：

html.fancybox-lock {
    overflow: visible !important;
}

代码重置元素的原始溢出。问题是overflow: hidden;隐藏元素上的滚动条<html>，导致页面“跳”到顶部。为了保留滚动条的位置，我们用overflow: visible;

于 2015-11-02T22:00:55.397 回答
4

这也有帮助

.fancybox-lock body {
    overflow: visible !important;
}
于 2014-03-22T08:45:32.390 回答
1

接受的答案并不完整，因为它实际上并没有解决它只是避免它的问题！这是一个更完整的答案，它实际上在修复窗口跳转问题时为您提供了所需的功能： 

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });
于 2016-05-13T16:47:32.333 回答
0

也许这个答案已经晚了，但也许它在未来会有所帮助，如果在点击/关闭图像花式框后让您的网站滚动到顶部，您可以删除：

F.trigger('onReady');

或更好地使用：

/*F.trigger('onReady');*/

在 fancyBox 版本：2.1.5（2013 年 6 月 14 日星期五）中，部分代码位于第 897 行。

于 2013-09-06T19:39:56.867 回答
0

如果您使用的是 fancybox 默认函数，您实际上可以像这样编写代码：

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });
于 2016-04-07T19:11:22.037 回答
0

你也可以用这种方法试试！

$.fancybox({
    beforeShow: function () {
        $("body").css({ 'overflow': 'hidden' });
    },
    afterClose: function () {
        $("body").css({ 'overflow-y': 'visible' });
    },
});
于 2021-10-29T05:23:42.243 回答
-4

我修复了它：

overflow: hidden !important;

在.fancybox-lock体内jquery.fancybox.css。滚动条不跳:)

于 2013-08-15T06:26:17.797 回答