CSS Anchor API实现动态高度popover：视口适配与滚动需求

结合CSS Anchor API的anchor()函数和视口单位，无需额外锚点就能实现popover内容不超出视口且自动滚动的效果：

.popover {
  position: absolute;
  anchor-name: --popover-anchor;
  position-anchor: --popover-anchor;
  /* 基础定位及 fallback 逻辑 */
  inset-area: bottom;
  position-try-fallbacks: top;
  
  /* 核心：动态计算最大高度 */
  max-height: calc(
    max(
      /* 向上弹出时，取锚点顶部到视口顶部的可用空间 */
      anchor(--popover-anchor top) - var(--viewport-margin, 10px),
      /* 向下弹出时，取锚点底部到视口底部的可用空间 */
      100svh - anchor(--popover-anchor bottom) - var(--viewport-margin, 10px)
    )
  );
  overflow-y: auto;
  /* 基础样式 */
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: white;
  border-radius: 0.375rem;
}

关键逻辑说明 #

• anchor(--popover-anchor top) 获取锚点元素顶部到视口顶部的距离，100svh 是适配移动端的视口高度单位（避免浏览器工具栏影响视口计算）。
• 通过max()函数自动适配两种弹出方向的可用空间，--viewport-margin用于预留边距，避免popover紧贴视口边缘。
• 当内容高度超过计算出的max-height时，overflow-y: auto会自动显示滚动条。

如果需要兼容暂不支持CSS Anchor API的浏览器，或者纯CSS逻辑有特殊场景限制，可以用极简的ResizeObserver实现，无需复杂的边界碰撞检测：

// 假设popover元素通过data-anchor属性关联锚点选择器
document.querySelectorAll('.popover').forEach(popover => {
  const anchor = document.querySelector(popover.dataset.anchor);
  if (!anchor) return;

  const observer = new ResizeObserver(() => {
    const popoverRect = popover.getBoundingClientRect();
    const anchorRect = anchor.getBoundingClientRect();
    const viewportMargin = 10;

    // 判断popover位于锚点的上方还是下方
    const isPositionedAbove = popoverRect.bottom < anchorRect.top;
    // 计算当前方向下的最大可用高度
    const maxAvailableHeight = isPositionedAbove
      ? anchorRect.top - viewportMargin
      : window.innerHeight - anchorRect.bottom - viewportMargin;

    popover.style.maxHeight = `${maxAvailableHeight}px`;
  });

  observer.observe(popover);
  // 初始化时触发一次高度计算
  observer.observe(document.body);
});

逻辑说明 #

• 用ResizeObserver监听popover的尺寸变化（包括定位方向切换），实时计算视口内的可用高度。
• 通过比较popover和锚点的边界矩形，判断当前弹出方向，再对应计算可用空间。
• 代码仅保留核心高度计算逻辑，没有冗余的边界检测，适合作为可复用的Web组件逻辑。

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