花式框弹出窗口始终在顶部滚动

Fancybox popup always scrolls on top

本文关键字：顶部 滚动 窗口      更新时间：2023-09-26

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

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

我尝试使用选项"滚动外部"，但它不起作用。

非常感谢您的帮助！

在转到我的解决方案之前，请注意滚动本身并不是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);
    }
});

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

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

html , body {
    height: 100%;
}

如果只是在这里删除html，它就会起作用。问题是当<html>标签被赋予 100% 高度时，溢出不会按照您需要的方式工作。

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

相关文章：