logo标签列表

fancybox2 / fancybox会导致页面跳转到顶部

jquerycssfancybox-2
110

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

当我使用fancybox（点击链接等）时，整个html都会在其后面移动并到达顶部。我在另一个演示中将其正常工作，但是当我将相同的代码拖动到此项目时，它会跳到顶部。不仅对于连接到内联div的链接，而且对于简单的图片库也是如此。

有人遇到过这种情况吗？

请注意：我刚刚在iPad和iPhone上检查了一下，没有出现这个问题... 但是在Chrome和Firefox中出现了。 - sheriffderek
1
如果您正在使用fancybox v2.1.5，最新的主版本已经修复了该问题，您可以从这里https://github.com/fancyapps/fancyBox/archive/master.zip下载。因此，不再需要对js或css文件进行任何修改。 - JFK
11个回答
337
11
这绝对是正确的方法。楼主应该将其标记为采纳的答案。感谢您！ - cfx
完全同意。接受的答案（从fancybox2中删除代码）是一种hack方法。 - Rob Gonzalez
很不幸，已经有一整年没有更改被接受的答案了。希望未来的用户能够实现这个答案，而不是“从插件中剪切代码”的答案。 - AndyWarren
5
我认为这个答案不能解决问题。许多人可能不喜欢能够滚动fancybox后面的内容（如果“locked”设置为false会发生这种情况）。这只是一个暂时性的解决方法，可能会在某些情况下产生另一个问题。这是一个错误，并已在最新的主要版本https://github.com/fancyapps/fancyBox/archive/master.zip中进行了更正。 - JFK
1
@JFK 我同意这个修复可能并不理想，因为它会导致滚动问题，但我已经在最新的主分支上进行了测试，页面仍然会跳转到顶部。不过，当fancybox关闭时，它会恢复到原来的位置。 - Mr Jonny Wood
显示剩余10条评论
35

Jordanj77说得没错，但最简单的解决方法是直接打开样式表 jquery.fancybox.css，并在 .fancybox-lock部分中注释掉说 overflow: hidden !important; 的那一行。

4
使用此方法要比使用“helper”更好，因为使用“helper”时，鼠标滚轮会在叠加层下面继续滚动页面。注释掉溢出部分可以避免页面跳动，但是主页面的滚动条仍然被锁定。 - Panama Jack
14

我知道这是一个老问题，但我认为我已经找到了一个好的解决方案。问题在于fancybox更改了body的溢出值以隐藏浏览器滚动条。

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

$('.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;  
    }
9
问题在于fancyBox更改了body的overflow值以隐藏浏览器滚动条，我找不到切换此行为的选项。您可以删除fancyBox代码中的此部分来防止它发生：
if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
太好了！这也是为什么我的页面向左跳动20像素的原因。谢谢！你解决了我的两个问题！ - sheriffderek
滚动条在那里...但是无论如何，我总是使用overflow-y: scroll;，所以对我来说这是一个公平的权衡。 - sheriffderek
我猜这会阻止鼠标滚轮的功能 - 我还会继续寻找其他解决方案。但就像我说的，现在这个方法已经管用了！ - sheriffderek
3
如果您正在使用fancybox v2.1.5，最新的主版本已经解决了问题，您可以从这里https://github.com/fancyapps/fancyBox/archive/master.zip下载。因此，不需要对js或css文件进行任何修改。 - JFK
你还可以将这段代码添加到你的CSS中：.fancybox-lock { overflow: inherit !important; } - sebastien
1
这是当时最好的答案......如果由于某种原因您有一个遗留网站或其他什么——可以将其视为一些参考。 - sheriffderek
7

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

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

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

这可能发生的另一个原因是因为 <body> 或/和 <html> 具有 height: 100%。 - thexpand
只有我能用的代码。 - Noryn Basaya
4
这也有所帮助。
.fancybox-lock body {
    overflow: visible !important;
}
1
覆盖第三方样式并不是一个好主意，特别是如果你必须使用!important修饰符来打破级联。我鼓励大家使用Dave Kiss提供的修复方法，而不是这个。 - Fabian S.
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'); 
            }
        });
0
如果你正在使用fancybox的默认函数，实际上可以像这样编码：
    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });
0

你也可以尝试这种方法！

$.fancybox({
    beforeShow: function () {
        $("body").css({ 'overflow': 'hidden' });
    },
    afterClose: function () {
        $("body").css({ 'overflow-y': 'visible' });
    },
});
0
也许这个答案有点晚了，但或许它可以在未来帮到你。如果在点击/关闭图像fancybox后，你的网站会滚动到顶部，你可以尝试删除“：”。
F.trigger('onReady');

或者更好的使用：

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

在 fancyBox 版本 2.1.5（2013 年 6 月 14 日星期五），该代码部分位于第 897 行。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接