Question

我已经在我的网站上实现了fancybox插件，但我注意到了这个问题：

每次单击图像时，它都会正确打开图像，但它总是在网站顶部滚动，并且在打开弹出窗口时不允许我向下滚动。您可以在我的网站here中看到此问题。

我尝试使用“scrollOutside”选项，但它不起作用。

非常感谢你的帮助！

Answer 1

你的css中有以下选择器，这会导致问题。

html , body {
    height: 100%;
}

如果只是在这里删除html，它就会起作用。事情就是当<html>标签有100％的高度时，溢出不能按照你需要的方式工作。

或者替代选项是为<html>代码提供内联样式并设置height: auto;。打开控制台，然后尝试打开图像，它不会滚动到顶部。

Answer 2

在转到我的解决方案之前，请注意滚动不是fancybox问题本身。您基本上可以通过浏览器控制台在所有其他页面中对其进行测试：

$.fancybox("test");

在此网页中，您有多个<div>可滚动页面。也许你可以滚动到正确的页面。我写了回滚解决方案。

首先我们需要在您点击它时保存页面。

var thisPage = "homepage";
$(".page").click(function(){
    thisPage = $(this).attr("id");
});

现在，您可以随时滚动回页面。例如onClosed：

$("a.inline").fancybox({
    // ... other configurations ...
    'onClosed' : function() {
        $("html,body").scrollTop($("#"+thisPage).offset().top);
    }
});

如果它不起作用，请告诉我。

Fancybox弹出窗口总是在顶部滚动

2 个答案: