Question

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

看到我想要完成的任务

我需要尽快解决这个问题。我正在创建一个wordpress主题，我打算给wp社区。

Answer 1

问题是fancyBox会更改正文的溢出值以隐藏浏览器滚动条。这实际上可以通过Fancybox 2中的帮助程序来完成。

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

Answer 2

我意识到这个问题已经被问过了，但我想我找到了一个很好的解决方案。问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。

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

$('.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添加这些功能。请参阅：How to disable scrolling temporarily?

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

Fancy Box 2 - 点击窗口跳到顶部

2 个答案: