在我的网站上，我使用的是 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%
不幸的是，我不明白为什么会这样。有人可以解释一下吗？
注意:我已经找到了这个问题的解决方案和破解方法，但我想了解为什么会这样
最佳答案
更新:如果您在指向带有 ID 的标签(例如“https://example.com/#currentsection”)的 URL 上触发 Fancybox，则似乎不起作用。当您退出 Fancybox 时，它不会转到页面顶部，但会滚动到带有 ID 的标签的顶部，即使您设置了 autoFocus 和 placeFocusBack 选项设置为 false。奇怪的是，如果您的 URL 指向 #top，它仍然有效。
原始答案
我发现在 Next.js 中使用 Fancybox 时，用 autoFocus set to false 绑定(bind)或配置 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 { SSRProvider } from "@react-aria/ssr";
function MyApp({ Component, pageProps }) {
return (
<SSRProvider>
<Fancybox options={{ infinite: false, autoFocus: false }}>
<Component {...pageProps} />
</Fancybox>
</SSRProvider>
);
}
export default MyApp;
关于css - 防止 fancybox 返回页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24585195/