iter(g45): modal/drawer/image 打开时锁定背景滚动

This commit is contained in:
HIsheR
2026-10-26 12:02:16 +08:00
parent 7437fed395
commit 0a0dc7a853
5 changed files with 28 additions and 3 deletions
+3 -1
View File
@@ -1,5 +1,5 @@
import { h } from '@ui-arch/frame';
import { pushOverlay } from './overlay.js';
import { lockScroll, pushOverlay } from './overlay.js';
import type { ImageProps } from './types.js';
/*** 图片:缩略图展示,点击 / 回车打开遮罩大图预览(Esc 或点击遮罩关闭),加载失败自动落占位;样式只消费 --ua-* 令牌 ***/
@@ -26,6 +26,7 @@ export function image(props: ImageProps): HTMLElement {
/*** 打开全屏遮罩预览层;关闭时自清理、解绑键盘并归还焦点 ***/
function openViewer(src: string, alt?: string): void {
let releaseEsc: (() => void) | null = null; // Esc 栈注销函数:预览层占一层,关闭即释放
const releaseLock = lockScroll(); // 预览期锁背景滚动
const prev = document.activeElement as HTMLElement | null; // 焦点归还目标
const mask = h(
'div',
@@ -35,6 +36,7 @@ function openViewer(src: string, alt?: string): void {
const close = () => {
mask.remove(); // 自清理:遮罩移除 + 出 Esc 栈 + 焦点归还
releaseEsc?.();
releaseLock();
prev?.focus?.();
};
mask.addEventListener('click', close);