Fluent UI：如何获取DetailsList组件Viewport的高度？

我之前在做Fluent UI项目时也碰到过一模一样的问题，特意研究了几个不依赖组件内部DOM结构的靠谱方案，分享给你：

1. 利用组件内置API计算总高度 #

DetailsList本身提供了getRowCount、getRowHeight这些方法，结合表头的高度（可以用默认值或通过ref获取实际渲染高度），就能算出整个列表的总高度，完全不用碰内部的Viewport元素：

import { useRef, useEffect } from 'react';
import { DetailsList, IDetailsList } from '@fluentui/react';

const YourComponent = () => {
  const detailsListRef = useRef<IDetailsList>(null);
  const scrollableContainerRef = useRef<HTMLDivElement>(null);
  const heightThreshold = 500; // 你的特定高度阈值

  const calculateTotalHeight = () => {
    const rowCount = detailsListRef.current?.getRowCount() || 0;
    // 若使用自定义行高，改用detailsListRef.current?.getRowHeight(index)累加
    const defaultRowHeight = 48;
    // 表头默认高度，也可通过ref获取渲染后的实际高度
    const defaultHeaderHeight = 56;

    return defaultHeaderHeight + rowCount * defaultRowHeight;
  };

  useEffect(() => {
    const totalHeight = calculateTotalHeight();
    if (scrollableContainerRef.current) {
      scrollableContainerRef.current.style.height = totalHeight > heightThreshold 
        ? `${heightThreshold}px` 
        : `${totalHeight}px`;
    }
  }, [items]); // items变化时重新计算

  return (
    <div ref={scrollableContainerRef} className="scrollable-container">
      <ScrollablePane>
        <DetailsList ref={detailsListRef} items={items} {...otherProps} />
      </ScrollablePane>
    </div>
  );
};

2. 用ResizeObserver监听实际内容高度 #

如果担心计算值和实际渲染高度有误差（比如行高不固定、有合并单元格等），可以用ResizeObserver监听DetailsList根元素的scrollHeight，这个值会自动包含所有内容（表头+所有行）的总高度，完全不依赖内部DOM结构：

import { useRef, useEffect } from 'react';
import { DetailsList, IDetailsList } from '@fluentui/react';

const YourComponent = () => {
  const detailsListRef = useRef<IDetailsList>(null);
  const scrollableContainerRef = useRef<HTMLDivElement>(null);
  const heightThreshold = 500;

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const actualTotalHeight = entry.target.scrollHeight;
        if (scrollableContainerRef.current) {
          scrollableContainerRef.current.style.height = actualTotalHeight > heightThreshold
            ? `${heightThreshold}px`
            : `${actualTotalHeight}px`;
        }
      });
    });

    const listElement = detailsListRef.current as unknown as Element;
    if (listElement) observer.observe(listElement);

    return () => {
      if (listElement) observer.unobserve(listElement);
    };
  }, [items]);

  return (
    <div ref={scrollableContainerRef} className="scrollable-container">
      <ScrollablePane>
        <DetailsList ref={detailsListRef} items={items} {...otherProps} />
      </ScrollablePane>
    </div>
  );
};

3. 优化ScrollablePane与DetailsList的集成方式 #

其实Fluent UI官方推荐的固定表头滚动方案，是把DetailsList的表头单独抽出来放在ScrollablePane的header属性中，内容放在content里，这样ScrollablePane会自动处理滚动逻辑，你只需要监听content区域的高度即可，也能避免手动设置容器高度的麻烦：

import { ScrollablePane, DetailsList, DetailsHeader } from '@fluentui/react';

const YourComponent = () => {
  const scrollablePaneRef = useRef<IScrollablePane>(null);
  const heightThreshold = 500;

  useEffect(() => {
    const contentElement = scrollablePaneRef.current?.contentElement;
    if (contentElement) {
      const contentHeight = contentElement.scrollHeight;
      scrollablePaneRef.current.style.height = contentHeight > heightThreshold
        ? `${heightThreshold}px`
        : `${contentHeight + 56}px`; // 加上表头高度
    }
  }, [items]);

  return (
    <ScrollablePane
      ref={scrollablePaneRef}
      header={<DetailsHeader {...headerProps} />}
      content={<DetailsList items={items} hideHeader {...otherProps} />}
    />
  );
};

关键注意点 #

• 绝对不要直接获取内部带Viewport类名的DOM元素，Fluent UI的组件内部结构会随版本更新变化，这样的代码很容易失效。
• 如果使用自定义行高或复杂表头，优先用ResizeObserver的方案，能获取最准确的实际渲染高度。

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