KendoReact PivotGrid自定义后行表头与数据滚动不同步问题

场景说明 #

• 页面1：仅渲染PivotGrid透视表，功能正常
• 页面2：半屏展示透视表，另一半显示PDF文件，出现滚动异常

问题表现 #

自定义透视表样式与布局后，页面2垂直滚动时，行表头与透视表数据无法保持同步。该问题在Windows系统的Chrome浏览器中表现尤为明显，Mac系统下基本正常。

环境信息 #

• React：18.x
• KendoReact：7.x
• 浏览器：最新版Chrome

已尝试的解决方法 #

• 设置容器可滚动：虽能实现数据同步，但滚动时行表头会被隐藏
• 调整Kendo默认CSS覆盖样式：行表头与数据单元格仍存在错位问题
• 尝试Kendo内置的可滚动或锁定列功能：未解决同步问题

预期行为 #

垂直滚动时，行表头需与透视表对应行数据保持对齐，既不隐藏也不错位。

垂直滚动至底部时，数据与行表头不同步

自定义CSS代码 #

.pivot-height-validate {
  width: 100% !important;
  overflow: auto !important;
  position: relative;
  max-height: 75vh;

  .k-pivotgrid-row-headers {
    .k-pivotgrid-table {
      width: inherit !important;
    }
  }
  .k-pivotgrid-cell {
    p {
      font-size: 10px;
    }
  }

  .not-validated {
    background-color: #f7e1e1;

    &.selected-cell {
      border: 3px solid #e95454 !important;
    }
  }

  .validated {
    background-color: #ecf5ed;

    &.selected-cell {
      border: 3px solid #6fe97d !important;
    }
  }

}

.pivot-table-container {
  width: 100% !important;
  position: relative;
  overflow: auto !important; 
  max-height: 75vh;

  .k-pivotgrid-row-headers {
    .k-pivotgrid-table {
      width: inherit !important;
    }
  }

  .k-pivotgrid-column-headers {
    .k-pivotgrid-table {
      width: 100% !important;
      position: sticky;
      top: 0;
      z-index: 2;
    }
  }

  .k-pivotgrid-values {
    width: inherit !important;
    position: relative;
    z-index: 1;
  }

  .k-pivotgrid-cell {
    p {
      font-size: 10px;
    }
  }

  .not-validated {
    background-color: #f7e1e1;

    &.selected-cell {
      border: 3px solid #e95454 !important;
    }
  }

  .validated {
    background-color: #ecf5ed;

    &.selected-cell {
      border: 3px solid #6fe97d !important;
    }
  }
}

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