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:
parent
05e2989278
commit
507d271a2b
@ -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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user