feat: add touch scroll support for stack notifications

- Implement touch event handlers (touchStart, touchMove, touchEnd) in useListScroll
- Add touch scroll interaction for mobile devices
- Include unit test for touch scroll functionality

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/NotificationList.tsx

@@ -90,10 +90,8 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
 
   const [gap, setGap] = React.useState(0);
   const [notificationPosition, setNodeSize] = useListPosition(configList, stackPosition, gap);
-  const { contentRef, onWheel, scrollOffset, viewportRef } = useListScroll(
-    keyList,
-    notificationPosition,
-  );
+  const { contentRef, onTouchEnd, onTouchMove, onTouchStart, onWheel, scrollOffset, viewportRef } =
+    useListScroll(keyList, notificationPosition);
 
   React.useEffect(() => {
     const listNode = contentRef.current;
@@ -124,6 +122,9 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
           [`${prefixCls}-stack-expanded`]: expanded,
         },
       )}
+      onTouchEnd={onTouchEnd}
+      onTouchMove={onTouchMove}
+      onTouchStart={onTouchStart}
       onWheel={onWheel}
       onMouseEnter={() => {
         setListHovering(true);

src/hooks/useListScroll.ts

@@ -11,8 +11,10 @@ function getViewportInnerHeight(node: HTMLDivElement | null) {
   }
 
   const { paddingBottom, paddingTop } = window.getComputedStyle(node);
+  const topPadding = parseFloat(paddingTop) || 0;
+  const bottomPadding = parseFloat(paddingBottom) || 0;
 
-  return node.clientHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
+  return node.clientHeight - topPadding - bottomPadding;
 }
 
 function getMaxScroll(viewportNode: HTMLDivElement | null, contentNode: HTMLDivElement | null) {
@@ -28,6 +30,8 @@ export default function useListScroll(
 ) {
   const viewportRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
+  const touchStartYRef = React.useRef<number | null>(null);
+  const touchStartOffsetRef = React.useRef(0);
   const prevKeyListRef = React.useRef<string[]>(keyList);
   const prevNotificationPositionRef = React.useRef<Map<string, NodePosition>>(new Map());
   const scrollOffsetRef = React.useRef(0);
@@ -107,8 +111,50 @@ export default function useListScroll(
     [syncScrollOffset],
   );
 
+  const onTouchStart = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {
+    const touch = event.touches[0];
+
+    if (!touch) {
+      return;
+    }
+
+    touchStartYRef.current = touch.clientY;
+    touchStartOffsetRef.current = scrollOffsetRef.current;
+  }, []);
+
+  const onTouchMove = React.useCallback(
+    (event: React.TouchEvent<HTMLDivElement>) => {
+      const touch = event.touches[0];
+      const touchStartY = touchStartYRef.current;
+      const maxScroll = getMaxScroll(viewportRef.current, contentRef.current);
+
+      if (!touch || touchStartY === null || !maxScroll) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const nextOffset = clampScrollOffset(
+        touchStartOffsetRef.current + touch.clientY - touchStartY,
+        maxScroll,
+      );
+
+      if (nextOffset !== scrollOffsetRef.current) {
+        syncScrollOffset(nextOffset);
+      }
+    },
+    [syncScrollOffset],
+  );
+
+  const onTouchEnd = React.useCallback(() => {
+    touchStartYRef.current = null;
+  }, []);
+
   return {
     contentRef,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
     onWheel,
     scrollOffset,
     viewportRef,

tests/stack.test.tsx

@@ -230,4 +230,53 @@ describe('stack', () => {
     getComputedStyleSpy.mockRestore();
     offsetHeightSpy.mockRestore();
   });
+
+  it('supports touch scroll on mobile', () => {
+    const clientHeightSpy = vi
+      .spyOn(HTMLElement.prototype, 'clientHeight', 'get')
+      .mockImplementation(function mockClientHeight() {
+        if (this.classList?.contains('rc-notification-list')) {
+          return 120;
+        }
+
+        return 0;
+      });
+    const scrollHeightSpy = vi
+      .spyOn(HTMLElement.prototype, 'scrollHeight', 'get')
+      .mockImplementation(function mockScrollHeight() {
+        if (this.classList?.contains('rc-notification-list-content')) {
+          return 300;
+        }
+
+        return 0;
+      });
+
+    render(
+      <NotificationList
+        placement="topRight"
+        configList={Array.from({ length: 5 }, (_, index) => ({
+          key: index,
+          description: `Notice ${index}`,
+          duration: false,
+        }))}
+      />,
+    );
+
+    const list = document.querySelector<HTMLElement>('.rc-notification-list');
+    const content = document.querySelector<HTMLElement>('.rc-notification-list-content');
+
+    fireEvent.touchStart(list!, {
+      touches: [{ clientY: 120 }],
+    });
+    fireEvent.touchMove(list!, {
+      touches: [{ clientY: 60 }],
+    });
+
+    expect(content?.style.transform).toBe('translate3d(0, -60px, 0)');
+
+    fireEvent.touchEnd(list!);
+
+    clientHeightSpy.mockRestore();
+    scrollHeightSpy.mockRestore();
+  });
 });