如何实现元素相对于祖父容器的CSS Sticky定位？（Fluent UI场景）

问题描述 #

我正在使用Fluent UI 8的ShimmeredDetailsList组件，希望将部分行设置为sticky定位。但该组件会将元素渲染在虚拟分页（virtualized pages）中，直接给目标行设置position: sticky时，对应分页被虚拟滚动移除后，元素会脱离容器。我需要让这些行相对于包含所有分页的祖父容器保持sticky效果。

尝试给虚拟分页容器设置display: 'contents'后，sticky功能生效，但表格布局被破坏，请问有没有合适的实现方法？

示例代码 #

HTML结构 #

<div class="container">
  <div class="virtual-page">
    <div class="header">Header 1</div> <!-- 需要相对于container保持sticky -->
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
  <div class="virtual-page">
    <div class="item" >Item 1</div>
    <div class="item">Item 2</div>
    <div class="header">Header 3</div>
  </div>
  <div class="virtual-page">
    <div class="header">Header 4</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

CSS样式 #

.container {
  height: 400px;
  width: 400px;
  margin: 50px;
  overflow: auto;
  border: 1px solid yellow;
}

.virtual-page {
  display: block;
  border: 1px solid teal;
  width: 100%;
  /* display: contents; 添加后sticky生效，但会破坏布局，无法使用 */
}

.header {
  width: 100%;
  height: 30px;
  padding: 10px;
  background-color: aqua;
  position: sticky;
  top: 0px;
  z-index: 10;
}

.item {
  height: 30px;
  width: 100%;
  padding: 10px;
}

解决方案 #

方案1：外部独立渲染Sticky头部（推荐适配虚拟列表） #

虚拟分页的布局隔离特性导致纯CSS方案难以兼顾效果和布局，更可靠的方式是分离sticky元素的渲染逻辑：

• 在ShimmeredDetailsList的外层容器（即示例中的.container）内，添加一个独立的sticky容器：

  .sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 10;
    display: none; /* 默认隐藏 */
    background-color: aqua;
    padding: 10px;
    height: 30px;
    width: 100%;
  }
  

• 在组件的onRenderRow回调中，给需要设置sticky的行标记特殊标识（比如通过rowData中的自定义字段判断），同时不在该行设置sticky样式；
• 监听容器的滚动事件，结合Fluent UI提供的getVisibleRows方法，获取当前可视区域内的目标sticky行，同步更新外部sticky容器的内容和显示状态：

  const detailsListRef = useRef(null);
  const [currentStickyContent, setCurrentStickyContent] = useState('');
  
  const handleScroll = () => {
    if (!detailsListRef.current) return;
    const visibleRows = detailsListRef.current.getVisibleRows();
    // 假设rowData中用isStickyHeader标记需要sticky的行
    const targetRow = visibleRows.find(row => row.data.isStickyHeader);
    const wrapper = document.querySelector('.sticky-header-wrapper');
    if (targetRow) {
      setCurrentStickyContent(targetRow.data.name);
      wrapper.style.display = 'block';
    } else {
      wrapper.style.display = 'none';
    }
  };
  
  // 在组件挂载时绑定滚动监听
  useEffect(() => {
    const container = document.querySelector('.container');
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);
  

• 这种方式完全避开虚拟分页的布局限制，sticky元素直接绑定到祖父容器，同时不会破坏原有表格布局。

方案2：调整虚拟分页容器的CSS属性（纯CSS尝试） #

如果不想修改JS逻辑，可以尝试调整虚拟分页容器的布局属性，让sticky元素的包含块提升到祖父容器：

• 修改.virtual-page的样式：

  .virtual-page {
    display: block;
    border: 1px solid teal;
    width: 100%;
    /* 关键：取消块格式化上下文隔离，让sticky元素的包含块变为祖父容器 */
    overflow: visible;
    contain: none;
    height: auto;
  }
  

• 确保.container是唯一的滚动容器，其所有父元素未设置overflow属性；
• 注意：该方案会取消浏览器对虚拟分页的布局隔离优化，可能影响大数据量场景下的列表性能，仅适合数据规模较小的情况。

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