防止fancybox返回页面顶部
Posted
技术标签:
【中文标题】防止fancybox返回页面顶部【英文标题】：Preventing fancybox returning to top of page 【发布时间】：2014-08-26 10:28:22 【问题描述】：在我的网站中，我使用的是 fancybox 2.1.5。当我打开图像并关闭它时，我无意中返回到页面顶部。问题可以在以下最小示例中看到
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
body
height: 100%;
html
height: 100%;
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />
</head>
<body>
<a href=#>
<img src="http://placehold.it/1000x600">
</a>
<a class="fancybox" href="img/Gallery/500x600.gif">
<img src="http://placehold.it/500x600">
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
<script>
$(document).ready(function()
$('.fancybox').fancybox();
);
</script>
</body>
</html>
您会看到，如果您打开和关闭第二张图片，您会发现自己位于页面顶部。
看来如果我删除头部的初始样式
<style media="screen" type="text/css">
body
height: 100%;
html
height: 100%;
</style>
问题消失了。如果我只删除 body 样式或 html 样式，问题也会消失。为了让问题出现，body 和 html 的高度必须为 100%
很遗憾，我不明白为什么会这样。谁能解释一下？
注意：我已找到解决此问题的方法和技巧，但我想了解为什么会发生这种情况
【问题讨论】：
下载latest master，已修复该错误参考：github.com/fancyapps/fancyBox/issues/860 谢谢，我下载了最新的master，现在可以用了到原来的地方。这有点奇怪。让我觉得这个错误是通过黑客修复的。可能和我的body和html样式定义有关，但我不知道 fancybox2 / fancybox causes page to to jump to the top的可能重复 【参考方案1】：您可以使用花式框的原生助手来解决返回页首问题。
$('.fancybox').fancybox(
padding: 0,
helpers:
overlay:
locked: false
);
参考：http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
【讨论】：
感谢您的破解，但我仍然不明白为什么会发生这种情况，现在我遇到了在查看图像时可以滚动的问题。宁可不要！但非常感谢您的快速回答 您有两个选项可以在 fancybox 打开时禁用覆盖滚动 1)。升级到 v2.1.0 ...它会自动将 class="fancybox-lock" 添加到 标记，因此您无法滚动fancybox 后面的页面 - 或 - 2)。添加这些回调： beforeShow: function() $("body").css('overflow-y':'hidden'); , afterClose: function() $("body").css('overflow-y':'visible'); onStart 和 onClosed 不是 fancybox v2.x 但 1.3.x 的有效回调选项 谢谢，不过我以为我用的是2.1.5 这是一个临时解决方法，可能会在某些情况下创建另一个问题（许多人可能不喜欢滚动fancybox 后面的内容，如果将locked 设置为false 会发生这种情况。 ) 这是一个错误，已在您可以从此处下载的最新版主中得到纠正github.com/fancyapps/fancyBox/archive/master.zip @Farshad 请说明您的代码的作用以及它如何回答问题。如果您得到一个代码 sn-p 作为答案，您可能不知道如何处理它。答案应该为 OP 和未来的访问者提供有关如何调试和解决问题的指导。指出您的代码背后的想法是什么，极大地有助于理解问题并应用或修改您的解决方案。也请考虑在答案中包含您的评论。【参考方案2】：更新：如果您在指向带有 ID 的标签（例如，“https://example.com/#currentsection”）的 URL 上触发 Fancybox，似乎不起作用。当您退出 Fancybox 时，它不会转到页面顶部，但会滚动到带有 ID 的标签顶部，即使您已将 autoFocus 和 placeFocusBack 选项设置为 false。奇怪的是，如果您的 URL 指向 #top，它仍然有效。
原答案
我发现在 Next.js 中使用 Fancybox 时，使用 autoFocus set to false 绑定或配置 Fancybox 修复了这个问题。然后似乎placeFocusBack property（默认值：true）将适用。像这样设置它：
npm install --save @fancyapps/ui
components/fancybox-wrapper.js:
// Fancybox UI wrapper for lightbox
// Thanks to https://fancyapps.com/docs/ui/fancybox/react
import React, useEffect from "react";
import Fancybox as NativeFancybox from "@fancyapps/ui/dist/fancybox.esm.js";
function Fancybox(props)
const delegate = props.delegate || "[data-fancybox]";
useEffect(() =>
const opts = props.options || ;
NativeFancybox.bind(delegate, opts);
return () =>
NativeFancybox.destroy();
;
, []);
return <>props.children</>;
export default Fancybox;
pages/_app.js:
import Fancybox from "../components/fancybox-wrapper";
import "@fancyapps/ui/dist/fancybox.css";
import s-s-rProvider from "@react-aria/s-s-r";
function MyApp( Component, pageProps )
return (
<s-s-rProvider>
<Fancybox options= infinite: false, autoFocus: false >
<Component ...pageProps />
</Fancybox>
</s-s-rProvider>
);
export default MyApp;
【讨论】：
以上是关于防止fancybox返回页面顶部的主要内容，如果未能解决你的问题，请参考以下文章
[Fancybox 2.1加载AJAX模板，顶部留有很大的空白，但是当我以其他方式使用Fancybox时，不会发生此问题
单击 Fancybox Overlay div 时如何防止默认设置？
fancybox关闭弹出窗体parent.$.fancybox.close();