打开图片lightbox触发的scroll lock在history back后仍生效如何解决

你当前的实现通过hash锚点跳转打开lightbox，浏览器会自动将带lightbox hash的地址推入历史记录栈。用户点击后退按钮时，仅会触发地址栏hash回退，不会触发绑定在lightbox关闭按钮上的ScrollUnlock函数，因此页面的overflow: hidden属性没有被移除，导致滚动持续锁定。

新增hashchange事件监听，当地址栏hash不符合打开的lightbox规则时，自动触发滚动解锁即可，同步可以优化原有滚动操作的DOM选择逻辑，提高代码稳定性。

修改后的完整代码如下：

<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>
        // 页面加载完成后绑定监听
        window.addEventListener('DOMContentLoaded', () => {
          // 初始化时判断当前hash是否对应lightbox，匹配就锁定滚动
          checkLightboxStatus()
          // 监听hash变化，每次hash变化都检查lightbox状态
          window.addEventListener('hashchange', checkLightboxStatus)
        })

        function checkLightboxStatus() {
          const currentHash = window.location.hash
          // 判断当前hash是否对应存在的lightbox元素
          if (currentHash.startsWith('#lightbox_') && document.querySelector(currentHash)) {
            ScrollLock()
          } else {
            ScrollUnlock()
          }
        }

        function ScrollLock()
        {
            document.documentElement.style.overflow = 'hidden';
        }
        function ScrollUnlock()
        {
            document.documentElement.style.overflow = 'visible';
        }
    </script>
</body>
</html>

可选优化 #

如果你不需要支持通过带hash的链接直接打开对应lightbox，可以将打开lightbox的area标签的href改为javascript:void(0)，同时阻止默认跳转行为，打开lightbox的操作就不会被推入历史记录，用户点击后退会直接离开当前页面，也不会出现滚动锁定的问题。

内容的提问来源于stack exchange，提问作者james