fancybox2 / fancybox导致页面跳到顶部

105

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

当我使用fancybox时（单击链接等），整个html都移到了它的后面-然后转到顶部。我在另一个演示中可以正常工作，但是当我将相同的代码拖到该项目中时，它将跳到顶部。不仅包含指向内嵌div的链接，而且还包含简单的图片库。

有人经历过吗？

jquery css fancybox-2

— 警长
source

注意：我只是在iPhone的ipad上检查过此问题，但未发生此问题...但是它在chrome和Firefox中。

— sheriffderek

1

如果您使用的是fancybox v2.1.5，则该问题似乎已在最新的master中得到解决，您可以在此处下载表格github.com/fancyapps/fancyBox/archive/master.zip，这样就不会再有js或css文件被黑客入侵了。。

— 肯尼迪国际

331

实际上，可以使用Fancybox 2中的帮助程序完成此操作。

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

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

— 戴夫·基斯
source

11

这绝对是做到这一点的方法。OP将此标记为已接受答案。这次真是万分感谢！

— cfx

完全同意。接受的答案（从fancybox2中删除代码）是黑客。

— 罗伯·冈萨雷斯

不幸的是，已接受的答案整整一年都没有改变。希望将来的用户实现此目的，而不是“从插件中删除代码”答案。

— AndyWarren 2013年

5

我认为这个答案不能解决问题。许多人可能不希望在fancybox后面滚动内容（如果locked设置为，会发生这种情况false。）这是一个临时性的解决方法，可能会在某些情况下引发另一个问题。这是一个错误，它在最新的主得到纠正github.com/fancyapps/fancyBox/archive/master.zip

— 肯尼迪

1

@JFK我同意由于滚动的原因，此修复程序可能实际上并不理想，但是我已经使用最新的母版进行了测试，并且页面仍跳至顶部。不过，在关闭fancybox时，它会恢复为原始位置。

— 乔尼·伍德先生2014年

35

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

— 快速反应
source

4

这比使用辅助程序更好，因为有了辅助程序，页面将继续使用鼠标滚轮滚动到覆盖层下方。注释掉溢出阻止其跳出，但滚动条仍被锁定在主页上。

— 巴拿马杰克

14

我意识到这是一个古老的问题，但是我认为我已经找到了一个很好的解决方案。问题在于，花哨的框会更改主体的溢出值，以隐藏浏览器滚动条。

正如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;  
    }

— 乔兰
source

9

问题在于，fancyBox会更改主体的溢出值以隐藏浏览器滚动条。我找不到切换此行为的选项。

您可以删除fancyBox代码的这一部分以防止它：

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

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}

— 约旦
source

好极了！这就是为什么我的页面当时向左跳20px的原因。谢谢！您解决了我的2个问题！

— sheriffderek

滚动条在那里...但是我总是使用overflow-y：无论如何，所以对我来说这是一个公平的权衡。

— sheriffderek

我想这会阻碍鼠标滚轮的功能-我还将继续寻找其他解决方案。但是就像我说的那样，现在就可以解决问题了！

— sheriffderek

3

如果您使用的是fancybox v2.1.5，则该问题似乎已在最新的master中得到解决，您可以在此处下载表格github.com/fancyapps/fancyBox/archive/master.zip，这样就不会再有js或css文件被黑客入侵了。。

— 肯尼迪国际

1

这是当时最好的答案……如果由于某种原因您拥有旧网站或其他东西，请参阅此作为参考。

— sheriffderek 2014年

6

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

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

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

— 塞班
source

发生这种情况的另一个原因是因为<body>or或and <html>可能具有height: 100%

— thexpand 2015年

4

这也有帮助

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

— s
source

1

覆盖3rdparty样式不是一个好主意，特别是如果您必须使用！important修饰符来中断级联时。我鼓励所有人使用上面Dave Kiss提供的修复程序，而不要使用此修复程序。

— FabianSchöner2015年

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

— 伊恩
source

0

也许这个答案太迟了，但也许将来会有所帮助，如果在关闭/关闭图像后，fancybox使您的网站滚动到顶部，您可以删除：

F.trigger('onReady');

或更好地使用：

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

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

— 纳霍米·阿蒂亚斯（Nahomy Atias）
source

0

如果您使用的是fancybox默认功能，则实际上可以这样编写：

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });

— 斯蒂尔·洛基
source

-4

我用以下方法修复了它：

overflow: hidden !important;

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

— 用户名
source

4

这就是一个月前的快速反应。

— BoltClock