fix(lightbox): prevent page scroll on close via focus({ preventScroll: true })

关闭灯箱时 removeOverlay() 调用 .focus() 归还焦点给原图,浏览器的 focus()
默认会 scrollIntoView,导致页面自动滚动把原图完整纳入视口。用户向下滚动后
只点露出的下半截图、再 Esc 关闭时,页面会向上跳到整图可见——非预期行为。

focus({ preventScroll: true }) 抑制该滚动(Chrome68+/FF68+/Safari15.4+ 支持),
焦点归还的无障碍语义不变。
This commit is contained in:
xfy 2026-06-24 11:27:15 +08:00
parent 05e2989278
commit 507d271a2b

View File

@ -350,12 +350,14 @@ export {};
state.overlay.parentNode.removeChild(state.overlay);
}
state = null;
// 焦点归还:.blur-img 是 span 不可聚焦,让其内部 full img 获得焦点
// 焦点归还:.blur-img 是 span 不可聚焦,让其内部 full img 获得焦点。
// 用 preventScroll 抑制 focus() 默认的 scrollIntoView 行为——否则关闭灯箱后
// 页面会自动滚动把原图完整纳入视口(用户只点了一半露出的图时尤其明显)。
if (prev) {
var f = prev.querySelector(".blur-img-full");
if (f instanceof HTMLImageElement) {
f.setAttribute("tabindex", "-1");
f.focus();
f.focus({ preventScroll: true });
}
}
}