3

这是我第一次在我的项目中实现 FancyBox。我已将图像与链接分开。因此，当您将鼠标悬停在图像上时，会出现查看大图像的链接。那里的一切都很好。我的问题是单击链接时窗口不断跳转/滚动到顶部。我已经使用 jquery 通过使用 preventDefault 来禁用它的默认操作，但这并没有解决我的问题。有什么建议么？你可以在www.labpixls.com看到我想要完成的事情

我需要尽快解决这个问题。我正在创建一个我计划提供给 wp 社区的 wordpress 主题。

4

2 回答 2

8

问题是 fancyBox 改变了 body 的溢出值以隐藏浏览器滚动条。这实际上可以通过 Fancybox 2 中的助手来完成。

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});
于 2013-11-28T07:00:05.960 回答
4

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

正如Thorn 指出的，我们可以通过添加以下参数来阻止fancy box 这样做：

$('.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:30:20.163 回答