iter(g11): 浮层空间不足时自动翻转

2026-10-26 10:51:35 +08:00
parent 62784b1f2d
commit 00a7b90f44
12 changed files with 65 additions and 27 deletions
@@ -0,0 +1,11 @@
+/*** 浮层上下翻转判定：按触发器与面板的视口几何判断首选方位是否放得下，放不下且另一侧更宽敞则翻转；返回实际生效方位 'top' | 'bottom' ***/
+export function flip(trigger: HTMLElement, panel: HTMLElement, preferred: 'top' | 'bottom'): 'top' | 'bottom' {
+  const GAP = 8;   // 与 CSS 预留的浮层间距一致（popover 为 8px）
+  const MIN = 24;  // 兜底：面板尚未量出高度时按最小可读高度估算
+  const t = trigger.getBoundingClientRect();   // 触发器视口矩形
+  const h = panel.offsetHeight || MIN;         // 面板高度（visibility:hidden 仍占布局，可直接量）
+  const up = t.top;                            // 触发器上方可用空间
+  const down = window.innerHeight - t.bottom;  // 触发器下方可用空间
+  if (preferred === 'top') return up >= h + GAP || up >= down ? 'top' : 'bottom'; // 首选上方：放得下、或不比下方更局促就保持
+  return down >= h + GAP || down >= up ? 'bottom' : 'top'; // 首选下方：对称判定
+}