移动端透视表 滚动图表错位 SheetComponent

[LutherLcp]

移动源滚动会出现错位的问题 且 getScrollOffset拿不到滚动的xy，{scrollX: 0, scrollY: NaN, rowHeaderScrollX: 0}
<img width="484" height="550" alt="image" src="https://github.com/user-attachments/assets/00d4106d-e62e-4a37-9c51-cacbcd8209bd"

`import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
import {
LayoutWidthType,
CalcTotals,
VALUE_FIELD,
EXTRA_FIELD,
type SortMethod,
TooltipOptions,
TooltipOperatorMenuItem,
S2Theme,
S2Event,
} from '@antv/s2';
import '@antv/s2-react/dist/s2-react.min.css';

const SortMethodType = {
asc: 'asc',
desc: 'desc',
none: 'none',
};

const S2Table = (props: any) => {
const { source, config = {}, id, height, configChangeCallback, relation_setting } = props;
const { getFieldMeta, aggregateS2TableData, getAllMetaData } = useSetFn(
config,
ChartTypeEnum.table,
);

.....
useEffect(() => {
if (relationSetting?.filterInfo) {
const { filterInfo } = relationSetting;
const filterKey = relationSetting?.targetIndicator?.value;
const value = filterInfo?.value;
const filterItem = {
defaultValue: value,
field: filterKey,
op: ['date'].includes(config?.col_types?.[filterKey]) ? 'custom' : 'eq',
type: config?.col_types?.[filterKey] ?? 'string',
};

  configChangeCallback?.({
    ...config,
    filters: (config?.filters || []).concat([filterKey]),
    filters_array: config?.filters_array?.some(item => item.field === filterKey)
      ? config?.filters_array?.map(item =>
          item.field === filterKey ? { ...item, ...filterItem } : item,
        )
      : (config?.filters_array || []).concat([filterItem]),
  });
}

}, [relationSetting]);

// 移动端滚动时防止图表消失：优化渲染逻辑，避免性能问题
useEffect(() => {
if (!isMobile) return;

let cleanupFn: (() => void) | null = null;
let renderTimer: NodeJS.Timeout | null = null;
let isRendering = false;

// 延迟获取 spreadsheet 实例，确保组件已挂载
const timer = setTimeout(() => {
  const spreadsheet = s2Ref.current;
  if (!spreadsheet) return;

  /**
   * 获取滚动位置
   * 优先使用 S2 2.4.10 的 getScrollOffset API，如果不可用则从 DOM 获取
   * @returns { scrollX: number, scrollY: number }
   */
  const getScrollPosition = (): { scrollX: number; scrollY: number } => {
    let scrollX = 0;
    let scrollY = 0;
    let hasValidOffset = false;

    try {
      // 方法1: 使用 S2 2.4.10 的 facet.getScrollOffset API（推荐）
      if (
        spreadsheet?.facet?.getScrollOffset &&
        typeof spreadsheet.facet.getScrollOffset === 'function'
      ) {
        try {
          const offset = spreadsheet.facet.getScrollOffset();
          console.log('[getScrollOffset 返回值]', offset, typeof offset); // 调试日志

          // 处理不同的返回值格式
          if (offset !== null && offset !== undefined) {
            let tempX = 0;
            let tempY = 0;

            // 如果是对象
            if (typeof offset === 'object' && !Array.isArray(offset)) {
              tempX = offset.scrollX ?? offset.offsetX ?? offset.x ?? 0;
              tempY = offset.scrollY ?? offset.offsetY ?? offset.y ?? 0;
            }
            // 如果是数组 [scrollX, scrollY]
            else if (Array.isArray(offset) && offset.length >= 2) {
              tempX = offset[0] ?? 0;
              tempY = offset[1] ?? 0;
            }
            // 如果是数字（可能是 scrollX）
            else if (typeof offset === 'number' && !isNaN(offset)) {
              tempX = offset;
            }

            // 只有值不是 NaN 时才使用
            if (!isNaN(tempX) && !isNaN(tempY)) {
              scrollX = tempX;
              scrollY = tempY;
              hasValidOffset = true;
            }
          }
        } catch (e) {
          console.warn('getScrollOffset 调用出错:', e);
        }
      }

      // 方法2: 如果 getScrollOffset 不可用或返回无效值（NaN），从 DOM 获取
      if (!hasValidOffset) {
        const container = document.querySelector('.antv-s2-container') as HTMLElement;
        const scrollContainer = document.querySelector(
          '.antv-s2-scroll-container',
        ) as HTMLElement;
        const targetContainer = scrollContainer || container;
        if (targetContainer) {
          scrollX = targetContainer.scrollLeft || 0;
          scrollY = targetContainer.scrollTop || 0;
        }
      }

      // 方法3: 从 facet 属性直接获取（最后备用）
      if ((isNaN(scrollX) || isNaN(scrollY)) && spreadsheet?.facet) {
        const facet = spreadsheet.facet;
        if (facet.scrollX !== undefined && !isNaN(facet.scrollX)) scrollX = facet.scrollX;
        if (facet.scrollY !== undefined && !isNaN(facet.scrollY)) scrollY = facet.scrollY;
      }

      // 确保值有效
      scrollX = isNaN(scrollX) || scrollX < 0 ? 0 : scrollX;
      scrollY = isNaN(scrollY) || scrollY < 0 ? 0 : scrollY;
    } catch (e) {
      console.warn('get scroll position error:', e);
      scrollX = 0;
      scrollY = 0;
    }

    return { scrollX, scrollY };
  };

  /**
   * 强制重新渲染
   * 使用 S2 2.4.10 的正确 API 同步滚动状态并重新渲染
   */
  const forceRender = () => {
    // 如果正在渲染，跳过
    if (isRendering) return;

    // 清除之前的定时器
    if (renderTimer) {
      clearTimeout(renderTimer);
    }

    // 防抖：滚动结束后再渲染
    renderTimer = setTimeout(() => {
      isRendering = true;

      requestAnimationFrame(() => {
        try {
          if (!spreadsheet?.facet) {
            isRendering = false;
            return;
          }

          // 获取当前滚动位置
          const { scrollX, scrollY } = getScrollPosition();

          // 方法1: 使用 S2 2.4.10 的 updateScrollOffset API 同步滚动状态
          if (
            spreadsheet.updateScrollOffset &&
            typeof spreadsheet.updateScrollOffset === 'function'
          ) {
            try {
              spreadsheet.updateScrollOffset({
                scrollX,
                scrollY,
                skipScrollEvent: true, // 避免触发滚动事件循环
              });
            } catch (e) {
              console.warn('updateScrollOffset error:', e);
            }
          }

          // 方法2: 更新面板滚动组（确保布局正确）
          const facet = spreadsheet.facet;
          if (
            facet?.updatePanelScrollGroup &&
            typeof facet.updatePanelScrollGroup === 'function'
          ) {
            try {
              facet.updatePanelScrollGroup();
            } catch (e) {
              console.warn('updatePanelScrollGroup error:', e);
            }
          }

          // 方法3: 强制重新渲染
          try {
            spreadsheet.render();
          } catch (e) {
            console.warn('render error:', e);
          }

          // 延迟重置渲染标志，确保渲染完成
          setTimeout(() => {
            isRendering = false;
          }, 100);
        } catch (error) {
          console.warn('S2 scroll fix error:', error);
          isRendering = false;
        }
      });
    }, 100); // 降低防抖时间，提升响应速度
  };

  // 方法1: 监听 S2 的全局滚动事件（主要方式）
  const handleGlobalScroll = () => {
    forceRender();
  };
  spreadsheet.on(S2Event.GLOBAL_SCROLL, handleGlobalScroll);

  // 方法2: 监听 DOM 滚动事件作为备用（确保捕获所有滚动）
  const container = document.querySelector('.antv-s2-container') as HTMLElement;
  const scrollContainer = document.querySelector('.antv-s2-scroll-container') as HTMLElement;
  const targetContainer = scrollContainer || container;

  if (targetContainer) {
    // 使用 passive 选项提升性能
    targetContainer.addEventListener('scroll', forceRender, { passive: true });
    // 移动端触摸结束时触发，确保滚动完成后再渲染
    targetContainer.addEventListener('touchend', forceRender, { passive: true });
    // 监听 touchmove 结束，处理快速滑动
    let touchMoveTimer: NodeJS.Timeout | null = null;
    const handleTouchMove = () => {
      if (touchMoveTimer) {
        clearTimeout(touchMoveTimer);
      }
      touchMoveTimer = setTimeout(() => {
        forceRender();
      }, 150);
    };
    targetContainer.addEventListener('touchmove', handleTouchMove, { passive: true });

    const domCleanup = () => {
      if (renderTimer) {
        clearTimeout(renderTimer);
      }
      if (touchMoveTimer) {
        clearTimeout(touchMoveTimer);
      }
      targetContainer.removeEventListener('scroll', forceRender);
      targetContainer.removeEventListener('touchend', forceRender);
      targetContainer.removeEventListener('touchmove', handleTouchMove);
    };

    // 保存 DOM 清理函数
    const originalDomCleanup = cleanupFn;
    cleanupFn = () => {
      if (originalDomCleanup) {
        originalDomCleanup();
      }
      domCleanup();
    };
  }

  // 合并事件清理函数
  const originalCleanup = cleanupFn;
  cleanupFn = () => {
    spreadsheet.off(S2Event.GLOBAL_SCROLL, handleGlobalScroll);
    if (originalCleanup) {
      originalCleanup();
    }
  };
}, 300); // 减少延迟时间

return () => {
  clearTimeout(timer);
  if (cleanupFn) {
    cleanupFn();
  }
};

}, [isMobile, showChart]);

return (
<>
{showChart ? (
<div className={h-[parent] flex flex-col ${styles.s2_table_box} mt-[8px]}>
<SheetComponent
ref={s2Ref}
sheetType="pivot"
adaptive={!isMobile}
onMounted={spreadsheet => {
// 组件挂载后，移动端确保正确渲染
if (isMobile && spreadsheet) {
// 保存 spreadsheet 实例到 ref
s2Ref.current = spreadsheet;
// 延迟渲染，确保布局计算完成
setTimeout(() => {
try {
// 强制重新计算布局
if (spreadsheet?.facet?.updatePanelScrollGroup) {
spreadsheet.facet.updatePanelScrollGroup();
}

                // 强制重新渲染
                spreadsheet.render();

                // 再次延迟渲染，确保列宽正确
                setTimeout(() => {
                  spreadsheet.render();
                }, 200);
              } catch (error) {
                console.warn('S2 initial render error:', error);
              }
            }, 300);
          } else {
            s2Ref.current = spreadsheet;
          }
        }}
        dataCfg={s2DataConfig as any}
        options={s2Options as any}
        themeCfg={{
          theme: s2Theme,
        }}
      />
    </div>
  ) : (
    <ShowEmpty emptyMes={emptyMes} />
  )}
</>

);
};

export default S2Table;
`

版本：2.x

[github-actions[bot]]

@LutherLcp 您好！以下是关于您问题的自动回复：

感谢您开启这个讨论！

我们的团队会尽快查看您的问题。谢谢您的理解与支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。