我在打开图像灯箱时实现了滚动锁定切换，它运行良好，但在返回历史时保持锁定。如何解决这一问题？
<html>
<body>
<div class="desktop">
<img src="docs/docs_overview_desktop.jpg" width="100%" height="auto" usemap="#desktop">
<map name="desktop">
<area shape="rect" coords="2057.143,0,2742.857,960" href="#lightbox_000" onclick="ScrollLock()">
</map>
</div>
<div class="lightbox" id="lightbox_000">
<img src="docs/docs_000.jpg" usemap="#lightbox_000">
<map name="lightbox_000">
<area shape="rect" coords="200,200,500,500" href="#_" onclick="ScrollUnlock()">
</map>
</div>
<script>
function ScrollLock()
{
document.getElementsByTagName('*')[0].style.overflow = 'hidden';
}
function ScrollUnlock()
{
document.getElementsByTagName('*')[0].style.overflow = 'visible';
}
</script>
</body>
我不知道为什么要将代码document.getElementsByTagName('*')[0].style.overflow = 'hidden';添加到脚本ScrollLock()函数中。但这意味着HTML中的元素(例如div和class="desktop"(会得到溢出的hidden，因此您不会看到页面中的滚动。当您单击浏览器的后退按钮时，页面不一定会重新加载。因此溢出仍然是隐藏的。我认为可以用来解决这个问题的一种方法是在单击后退按钮后强制重新加载页面。在这里，我在你的脚本中添加了代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrol-lock</title>
</head>
<body>
<div class="desktop">
<img src="flower2.png" width="100%" height="auto" usemap="#desktop">
<map name="desktop">
<area shape="rect" coords="0,0,500,500" href="#_" onclick="ScrollLock()">
</map>
</div>
<div class="lightbox" id="lightbox_000">
<img src="flower.jpg" usemap="#flower">
<map name="flower">
<area shape="rect" coords="200,200,500,500" href="#_" onclick="ScrollUnlock()">
</map>
</div>
<script>
function ScrollLock()
{
document.getElementsByTagName('*')[0].style.overflow = 'hidden';
}
function ScrollUnlock()
{
document.getElementsByTagName('*')[0].style.overflow = 'visible';
}
document.onmouseover = function() {
//User's mouse is inside the page.
window.innerDocClick = true;
console.log("over");
}
document.onmouseleave = function() {
//User's mouse has left the page.
console.log("leave");
window.innerDocClick = false;
}
window.onhashchange = function() {
if (window.innerDocClick) {
window.innerDocClick = false;
} else {
if (window.location.hash != '#undefined') {
goBack();
} else {
history.pushState("", document.title, window.location.pathname);
location.reload();
}
}
}
function goBack() {
location.reload();
}
</script>
</body>
</html>在上面的代码中，我们首先检测用户何时在window.onhashchange方法的帮助下点击返回按钮，然后在goback()函数中，我们重新加载删除overflow:hidden的页面。我更改了HTML代码以在浏览器中查看图像，但我认为您不需要更改自己的HTML文件。