fix: horizontal scrolling (#1145)

* fix: horizontal scrolling * fix: horizontal scrolling * fix: horizontal scrolling
teableio · Dec 12, 2024 · 5afcd26 · 5afcd26
1 parent a5898a5
commit 5afcd26
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/sdk/src/components/grid/CellScroller.tsx b/packages/sdk/src/components/grid/CellScroller.tsx
@@ -3,7 +3,7 @@ import { useMemo, useRef, useCallback, forwardRef, useImperativeHandle } from 'r
 import { GRID_DEFAULT } from './configs';
 import { useEventListener } from './hooks';
 import type { IActiveCellBound } from './interface';
-import { isWindowsOS } from './utils/utils';
+import { getWheelDelta } from './utils/utils';
 
 export interface CellScrollerProps {
   containerRef: MutableRefObject<HTMLDivElement | null>;
@@ -73,8 +73,9 @@ const CellScrollerBase: ForwardRefRenderFunction<CellScrollerRef, CellScrollerPr
     (event: Event) => {
       if (!scrollEnable) return;
       event.preventDefault();
-      const { deltaY, shiftKey } = event as WheelEvent;
-      const fixedDeltaY = shiftKey && isWindowsOS() ? 0 : deltaY;
+      const [, fixedDeltaY] = getWheelDelta({
+        event: event as WheelEvent,
+      });
       scrollHandler(fixedDeltaY);
     },
     [scrollEnable, scrollHandler]

diff --git a/packages/sdk/src/components/grid/InfiniteScroller.tsx b/packages/sdk/src/components/grid/InfiniteScroller.tsx
@@ -10,7 +10,8 @@ import { getHorizontalRangeInfo, getVerticalRangeInfo, useEventListener } from '
 import type { ILinearRow, IScrollState } from './interface';
 import type { CoordinateManager } from './managers';
 import type { ITimeoutID } from './utils';
-import { cancelTimeout, isWindowsOS, requestTimeout } from './utils/utils';
+import { getWheelDelta } from './utils';
+import { cancelTimeout, requestTimeout } from './utils/utils';
 
 export interface ScrollerProps
   extends Pick<
@@ -203,12 +204,14 @@ const InfiniteScrollerBase: ForwardRefRenderFunction<ScrollerRef, ScrollerProps>
     (event: Event) => {
       if (!scrollEnable) return;
       event.preventDefault();
-      const { deltaX, deltaY, shiftKey } = event as WheelEvent;
-      const fixedDeltaY = shiftKey && isWindowsOS() ? 0 : deltaY;
-      const fixedDeltaX = shiftKey && isWindowsOS() ? deltaY : deltaX;
+      const [fixedDeltaX, fixedDeltaY] = getWheelDelta({
+        event: event as WheelEvent,
+        pageHeight: coordInstance.containerHeight - coordInstance.rowInitSize - 1,
+        lineHeight: coordInstance.rowHeight,
+      });
       scrollHandler(fixedDeltaX, fixedDeltaY);
     },
-    [scrollEnable, scrollHandler]
+    [scrollEnable, scrollHandler, coordInstance]
   );
 
   const onTouchStart = useCallback((e: TouchEvent) => {

diff --git a/packages/sdk/src/components/grid/utils/utils.ts b/packages/sdk/src/components/grid/utils/utils.ts
@@ -1,3 +1,5 @@
+import type { CoordinateManager } from '../managers';
+
 export type ITimeoutID = {
   id: number;
 };
@@ -23,9 +25,27 @@ export const requestTimeout = (callback: () => void, delay: number): ITimeoutID
   return timeoutID;
 };
 
-export const isWindowsOS = () => {
-  const agent = navigator.userAgent.toLowerCase();
-  return /win32|wow32|win64|wow64/.test(agent);
+export const getWheelDelta = ({
+  event,
+  pageHeight,
+  lineHeight,
+}: {
+  event: WheelEvent;
+  pageHeight?: number;
+  lineHeight?: number;
+}) => {
+  let [x, y] = [event.deltaX, event.deltaY];
+  if (x === 0 && event.shiftKey) {
+    [y, x] = [0, y];
+  }
+
+  // This value is approximate, it does not have to be precise.
+  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    y *= lineHeight ?? 32;
+  } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    y *= pageHeight ?? document.body.clientHeight - 180;
+  }
+  return [x, y];
 };
 
 export const hexToRGBA = (hex: string, alpha = 1) => {