如何在ag-grid上下滚动时隐藏pop-over（弹出层）？

核心原因 #

AG Grid采用虚拟滚动机制，滚动时会动态创建/复用行DOM元素；如果Pop-over采用相对单元格定位，滚动时单元格的视口位置变化会导致Pop-over偏移；若Pop-over挂载在body下且未监听网格滚动事件更新定位，也会出现跟随滚动脱节的问题。

具体解决方案 #

1. 调整Pop-over的定位基准 #

将Pop-over的定位容器从body改为AG Grid的网格容器（而非单个单元格），以position: relative的网格容器作为定位基准，Pop-over设为position: absolute，确保滚动网格容器时，Pop-over随容器同步滚动。

示例代码（React+AG Grid场景）：

const PopoverCellRenderer = (params) => {
  const [showPopover, setShowPopover] = useState(false);
  const gridContainerRef = useRef(null);
  const popoverRef = useRef(null);

  useEffect(() => {
    // 获取AG Grid的根容器
    gridContainerRef.current = params.api.getGridElement().closest('.ag-root-wrapper');
    if (showPopover && popoverRef.current && gridContainerRef.current) {
      // 计算单元格在网格容器内的相对坐标
      const cellRect = params.eCellElement.getBoundingClientRect();
      const gridRect = gridContainerRef.current.getBoundingClientRect();
      popoverRef.current.style.top = `${cellRect.top - gridRect.top}px`;
      popoverRef.current.style.left = `${cellRect.left - gridRect.left}px`;
    }
  }, [showPopover, params]);

  return (
    <>
      <div onClick={() => setShowPopover(!showPopover)}>{params.value}</div>
      {showPopover && (
        <div 
          ref={popoverRef}
          style={{
            position: 'absolute',
            zIndex: 1000,
            background: '#fff',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            padding: '8px 12px'
          }}
        >
          <div onClick={() => { /* 选项1逻辑 */ }}>选项1</div>
          <div onClick={() => { /* 选项2逻辑 */ }}>选项2</div>
        </div>
      )}
    </>
  );
};

2. 监听网格滚动事件实时更新位置 #

在Pop-over显示状态下，监听AG Grid的bodyScroll事件，实时修正Pop-over的坐标：

useEffect(() => {
  const gridApi = params.api;
  const updatePopoverPosition = () => {
    if (showPopover && popoverRef.current && gridContainerRef.current) {
      const cellRect = params.eCellElement.getBoundingClientRect();
      const gridRect = gridContainerRef.current.getBoundingClientRect();
      popoverRef.current.style.top = `${cellRect.top - gridRect.top}px`;
      popoverRef.current.style.left = `${cellRect.left - gridRect.left}px`;
    }
  };

  gridApi.addEventListener('bodyScroll', updatePopoverPosition);
  return () => gridApi.removeEventListener('bodyScroll', updatePopoverPosition);
}, [showPopover, params.api]);

3. 处理行复用导致的异常 #

AG Grid滚动时会复用行DOM，需在目标行被移除或单元格失去焦点时关闭Pop-over：

useEffect(() => {
  const gridApi = params.api;
  const handleRowRemoved = (event) => {
    if (event.rowNode === params.node) setShowPopover(false);
  };
  gridApi.addEventListener('rowRemoved', handleRowRemoved);
  return () => gridApi.removeEventListener('rowRemoved', handleRowRemoved);
}, [params.node, params.api]);

4. 替代方案：使用AG Grid内置编辑器 #

如果业务允许，直接使用AG Grid的cellEditor实现选择功能，这类组件会自动适配网格的滚动和行复用机制：

const CustomSelectEditor = (params) => {
  const confirmSelection = (value) => {
    params.setValue(value);
    params.stopEditing();
  };

  return (
    <div style={{ padding: '8px', background: '#fff' }}>
      <div onClick={() => confirmSelection('选项A')} style={{ padding: '4px 0' }}>选项A</div>
      <div onClick={() => confirmSelection('选项B')} style={{ padding: '4px 0' }}>选项B</div>
    </div>
  );
};

// 列配置示例
const columnDefs = [
  {
    headerName: '选择列',
    field: 'selectValue',
    editable: true,
    cellEditor: CustomSelectEditor,
    cellRenderer: (params) => params.value || '点击选择'
  }
];

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