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

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 弹出窗口总是在顶部滚动

Fancybox popup always scrolls on top

html

javascript

css

jquery

fancybox