React中根据屏幕视口处理下拉菜单的展开与高度适配问题

要实现下拉菜单根据屏幕空间自动调整高度和展开方向，核心是实时计算触发元素上下的可用垂直空间，动态给下拉容器设置最大高度，同时调整定位方向，完全无需硬编码max-height。

修改后的React逻辑代码 #

React.useLayoutEffect(() => {
  const wrapperEl = containerRef.current as HTMLElement;
  const optionsPanel = optionsPanelRef.current as HTMLElement;

  if (!wrapperEl || !optionsPanel) return;

  const viewportHeight = window.innerHeight;
  // 获取触发元素的视口位置与尺寸
  const { top: wrapperTop, bottom: wrapperBottom, height: wrapperHeight } = wrapperEl.getBoundingClientRect();
  // 获取下拉菜单的完整内容高度（不受当前样式限制）
  const originalPanelHeight = optionsPanel.scrollHeight;

  // 计算向下/向上展开的可用空间
  const spaceBelow = viewportHeight - wrapperBottom;
  const spaceAbove = wrapperTop;

  // 判断是否需要向上展开：向下空间不足，且向上空间更充足
  const shouldReposition = spaceBelow < originalPanelHeight && spaceAbove > spaceBelow;
  
  // 计算下拉容器的最大高度（预留16px边距，设置最小高度避免过窄）
  let maxPanelHeight = shouldReposition ? spaceAbove : spaceBelow;
  maxPanelHeight = Math.max(maxPanelHeight - 16, 100);

  // 更新状态与容器样式
  toggleDropdownReposition(shouldReposition);
  setOptionsPanelHeight(originalPanelHeight);
  optionsPanel.style.maxHeight = `${maxPanelHeight}px`;
}, [isListOpen, props.items]); // 依赖菜单展开状态与选项列表，确保内容变化时重新计算

修改后的TSX结构代码 #

<div
  className={`${titleClasses.join(' ')}`}
  data-id={`${props.dataIdPrefix}-dropdown-title`}
  onClick={toggleList}
  ref={containerRef}
>
  <span className="grid-dd-headerText">{headerTitle}</span>
  <span className="grid-dd-separator">|</span>
  <span>
    <Icon 
      dataIdPrefix="grid-dd-ind" 
      className={`dropdown-indicator fa-chevron-${repositionDropdown ? 'up' : 'down'}`} 
    />
  </span>
</div>
{isListOpen ? (
  <div 
    className="grid-dd-list-container" 
    ref={optionsPanelRef}
    style={{
      transform: repositionDropdown 
        ? `translateY(-${wrapperHeight + optionsPanelHeight}px)` // 向上对齐触发元素顶部
        : 'none',
    }}
  >
    <ul
      className="grid-dd-list"
      data-id={`${props.dataIdPrefix}-select`}
      onClick={e => e.stopPropagation()}
      style={{ overflowY: 'auto' }} // 内容超出时显示滚动条
    >
      {props.items.map((opt, i) => (
        <li
          key={opt.value}
          className={`${liClasses.join(' ')}`}
          onClick={() => selectItem(opt)}
          data-id={`${props.dataIdPrefix}-option-${opt.value}`}
          title={opt.value}
        >
          {opt.label}
        </li>
      ))}
    </ul>
  </div>
) : null}

关键细节说明 #

1. 精准尺寸获取：用scrollHeight获取下拉菜单的完整内容高度（不受当前样式限制），getBoundingClientRect()获取触发元素在视口中的实时位置，避免计算误差。
2. 动态高度控制：根据展开方向，将下拉容器的max-height设为对应方向的可用空间（预留边距），内容超出时自动触发滚动，完全适配视口。
3. 智能方向选择：优先尝试向下展开，当空间不足时，对比上下可用空间，选择更充足的方向展开，最大化显示菜单内容。
4. 交互体验优化：向上展开时通过translateY精准调整位置，同时切换箭头图标方向，让用户直观感知展开方向。

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