fix(scroll): 修复滚动边界判断错误导致无法滚动

packages/s2-core/src/common/interface/scroll.ts

@@ -4,11 +4,6 @@ export interface ScrollOffset {
   hRowScrollX?: number;
 }
 
-export interface S2WheelEvent extends WheelEvent {
-  layerX: number;
-  layerY: number;
-}
-
 export interface AreaRange {
   start: number;
   width: number;
@@ -18,3 +13,8 @@ export interface CellScrollPosition {
   scrollX: number;
   scrollY: number;
 }
+
+export interface CellScrollOffset {
+  offsetX: number;
+  offsetY: number;
+}

packages/s2-core/src/facet/base-facet.ts

@@ -42,9 +42,9 @@ import type {
   ViewMeta,
 } from '../common/interface';
 import type {
-  S2WheelEvent,
   ScrollOffset,
   CellScrollPosition,
+  CellScrollOffset,
 } from '../common/interface/scroll';
 import type { SpreadSheet } from '../sheet-type';
 import { ScrollBar, ScrollType } from '../ui/scrollbar';
@@ -200,9 +200,9 @@ export abstract class BaseFacet {
         ...originEvent,
         deltaX,
         deltaY,
-        layerX: x,
-        layerY: y,
-      } as unknown as S2WheelEvent);
+        offsetX: x,
+        offsetY: y,
+      } as unknown as WheelEvent);
     });
   };
 
@@ -712,36 +712,36 @@ export abstract class BaseFacet {
     return (offset * (trackLen - thumbLen)) / scrollTargetMaxOffset;
   };
 
-  isScrollOverThePanelArea = ({ layerX, layerY }: Partial<S2WheelEvent>) => {
+  isScrollOverThePanelArea = ({ offsetX, offsetY }: CellScrollOffset) => {
     return (
-      layerX > this.panelBBox.minX &&
-      layerX < this.panelBBox.maxX &&
-      layerY > this.panelBBox.minY &&
-      layerY < this.panelBBox.maxY
+      offsetX > this.panelBBox.minX &&
+      offsetX < this.panelBBox.maxX &&
+      offsetY > this.panelBBox.minY &&
+      offsetY < this.panelBBox.maxY
     );
   };
 
-  isScrollOverTheCornerArea = ({ layerX, layerY }: Partial<S2WheelEvent>) => {
+  isScrollOverTheCornerArea = ({ offsetX, offsetY }: CellScrollOffset) => {
     return (
-      layerX > this.cornerBBox.minX &&
-      layerX < this.cornerBBox.maxX &&
-      layerY > this.cornerBBox.minY &&
-      layerY < this.cornerBBox.maxY + this.panelBBox.height
+      offsetX > this.cornerBBox.minX &&
+      offsetX < this.cornerBBox.maxX &&
+      offsetY > this.cornerBBox.minY &&
+      offsetY < this.cornerBBox.maxY + this.panelBBox.height
     );
   };
 
-  updateHorizontalRowScrollOffset = ({ offset, layerX, layerY }) => {
+  updateHorizontalRowScrollOffset = ({ offset, offsetX, offsetY }) => {
     // 在行头区域滚动时 才更新行头水平滚动条
-    if (this.isScrollOverTheCornerArea({ layerX, layerY })) {
+    if (this.isScrollOverTheCornerArea({ offsetX, offsetY })) {
       this.hRowScrollBar?.emitScrollChange(offset);
     }
   };
 
-  updateHorizontalScrollOffset = ({ offset, layerX, layerY }) => {
+  updateHorizontalScrollOffset = ({ offset, offsetX, offsetY }) => {
     // 1.行头没有滚动条 2.在数值区域滚动时 才更新数值区域水平滚动条
     if (
       !this.hRowScrollBar ||
-      this.isScrollOverThePanelArea({ layerX, layerY })
+      this.isScrollOverThePanelArea({ offsetX, offsetY })
     ) {
       this.hScrollBar?.emitScrollChange(offset);
     }
@@ -816,9 +816,9 @@ export abstract class BaseFacet {
   isScrollOverTheViewport = (
     deltaX: number,
     deltaY: number,
-    layerY: number,
+    offsetY: number,
   ) => {
-    const isScrollOverTheHeader = layerY <= this.cornerBBox.maxY;
+    const isScrollOverTheHeader = offsetY <= this.cornerBBox.maxY;
     // 光标在角头或列头时, 不触发表格自身滚动
     if (isScrollOverTheHeader) {
       return false;
@@ -854,23 +854,23 @@ export abstract class BaseFacet {
     2. none => 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止
     所以只要不为 `auto`, 或者表格内, 都需要阻止外部容器滚动
   */
-  private stopScrollChainingIfNeeded = (event: S2WheelEvent) => {
+  private stopScrollChainingIfNeeded = (event: WheelEvent) => {
     const { interaction } = this.spreadsheet.options;
 
     if (interaction.overscrollBehavior !== 'auto') {
       this.stopScrollChaining(event);
     }
   };
 
-  private stopScrollChaining = (event: S2WheelEvent) => {
+  private stopScrollChaining = (event: WheelEvent) => {
     event?.preventDefault?.();
     // 移动端的 prevent 存在于 originalEvent上
     (event as unknown as GraphEvent)?.originalEvent?.preventDefault?.();
   };
 
-  onWheel = (event: S2WheelEvent) => {
+  onWheel = (event: WheelEvent) => {
     const { interaction } = this.spreadsheet.options;
-    const { deltaX, deltaY, layerX, layerY } = event;
+    const { deltaX, deltaY, offsetX, offsetY } = event;
     const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY(
       deltaX,
       deltaY,
@@ -881,7 +881,7 @@ export abstract class BaseFacet {
     this.spreadsheet.interaction.clearHoverTimer();
 
     if (
-      !this.isScrollOverTheViewport(optimizedDeltaX, optimizedDeltaY, layerY)
+      !this.isScrollOverTheViewport(optimizedDeltaX, optimizedDeltaY, offsetY)
     ) {
       this.stopScrollChainingIfNeeded(event);
       return;
@@ -905,13 +905,13 @@ export abstract class BaseFacet {
       if (optimizedDeltaX !== 0) {
         this.showHorizontalScrollBar();
         this.updateHorizontalRowScrollOffset({
-          layerX,
-          layerY,
+          offsetX,
+          offsetY,
           offset: optimizedDeltaX + hRowScrollX,
         });
         this.updateHorizontalScrollOffset({
-          layerX,
-          layerY,
+          offsetX,
+          offsetY,
           offset: optimizedDeltaX + currentScrollX,
         });
       }

packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx

@@ -10,7 +10,6 @@ import {
   S2Event,
   type S2Options,
   SpreadSheet,
-  type S2WheelEvent,
   TableSheet,
 } from '@antv/s2';
 import { getContainer, getMockData, sleep } from '../util/helpers';
@@ -255,9 +254,9 @@ describe('table sheet normal spec', () => {
       s2.facet.onWheel({
         deltaX: 0,
         deltaY: 0,
-        layerX: 0,
-        layerY: 0,
-      } as S2WheelEvent);
+        offsetX: 0,
+        offsetY: 0,
+      } as unknown as WheelEvent);
     });
   });
 });

packages/s2-react/playground/config.ts

@@ -40,15 +40,14 @@ export const s2Options: S2Options = {
       trend: true,
     },
   },
-  hierarchyType: 'tree',
+  hierarchyType: 'grid',
   style: {
+    rowCfg: {
+      width: 200,
+    },
     cellCfg: {
       height: 50,
     },
-    // rowCfg: {
-    //   width: 300,
-    // },
-    // treeRowsWidth: 500,
     hierarchyCollapse: false,
   },
 };

s2-site/docs/api/basic-class/base-facet.zh.md

@@ -51,15 +51,15 @@ s2.facet.xx()
 | getRealWidth | 获取实际渲染的宽度 | () => number |
 | getRealHeight | 获取实际渲染的高度 | () => number |
 | clearAllGroup | 清空所有 Group | () => void |
-| isScrollOverThePanelArea | 是否在数值区域滚动 | (options: { layerX: number, layerY: number }) => boolean |
-| isScrollOverTheCornerArea | 是否在角头区域滚动 | (options: { layerX: number, layerY: number }) => boolean |
+| isScrollOverThePanelArea | 是否在数值区域滚动 | (options: { offsetX: number, offsetY: number }) => boolean |
+| isScrollOverTheCornerArea | 是否在角头区域滚动 | (options: { offsetX: number, offsetY: number }) => boolean |
 | isScrollToLeft | 是否滚动到了最左边 | (deltaX: number) => boolean |
 | isScrollToRight | 是否滚动到了最右边 | (deltaX: number) => boolean |
 | isScrollToTop | 是否滚动到了顶部 | (deltaY: number) => boolean |
 | isScrollToBottom | 是否滚动到了底部 |  (deltaY: number) => boolean|
 | isVerticalScrollOverTheViewport | 是否在数值单元格区域垂直滚动 | (deltaY: number) => boolean |
 | isHorizontalScrollOverTheViewport | 是否在数值单元格区域水平滚动 | (deltaX: number) => boolean |
-| isScrollOverTheViewport | 是否在数值单元格区域滚动 | (deltaX: number, deltaY: number, layerY: number) => boolean |
+| isScrollOverTheViewport | 是否在数值单元格区域滚动 | (deltaX: number, deltaY: number, offsetY: number) => boolean |
 | cancelScrollFrame | 取消当前滚动帧 | () => void |
 | clearScrollFrameIdOnMobile | 取消当前滚动帧 （移动端） | () => void |
 | addCell | 添加单元格 | (cell: [BaseCell](/zh/docs/api/basic-class/base-cell)) => void |