fancybox2 / fancybox导致页面跳到顶部

2020/11/16 18:22 · jquery ·  · 0评论

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

当我使用fancybox时(单击链接等),整个html都移到了它的后面-然后转到顶部。我在另一个演示中运行良好,但是当我将相同的代码拖到该项目中时,它将跳到顶部。不仅包含指向内嵌div的链接,而且还包含简单的图片库。

有人经历过吗?

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

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

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

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

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

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

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

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

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

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

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

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

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

这也有帮助

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

接受的答案并不完整,因为它实际上并不能解决问题,只是可以避免!这是一个更完整的答案,可以在解决窗口跳转问题时实际为您提供所需的功能:

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

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

F.trigger('onReady');

或更好地使用:

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

在fancyBox版本:2.1.5(2013年6月14日,星期五)中,部分代码位于897行。

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

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

我用以下方法修复了它:

overflow: hidden !important; 

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

本文地址:http://jquery.askforanswer.com/fancybox2-fancyboxdaozhiyemiantiaodaodingbu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!