refactor: replace custom scroll with native CSS scrolling

- Remove useListScroll hook entirely
- Use native browser scrolling via overflow-y: auto
- Hide scrollbars with CSS for cleaner appearance
- Return totalHeight from useListPosition for content sizing
- Simplify NotificationList by removing manual scroll handling

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

Author: zombieJ

assets/geek.less

@@ -17,6 +17,20 @@
   overflow: hidden;
   overscroll-behavior: contain;
 
+  &-list {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
   &-list-content {
     position: relative;
     display: flex;

assets/index.less

@@ -16,6 +16,19 @@
   pointer-events: none;
   flex-direction: column;
 
+  &-list {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
   // Position
   &-top,
   &-topLeft,
@@ -126,6 +139,10 @@
     }
   }
 
+  &-list-content {
+    position: relative;
+  }
+
   &-fade {
     overflow: hidden;
     transition: all 0.3s;

src/NotificationList.tsx

@@ -11,7 +11,6 @@ import Notification, {
   type NotificationStyles,
 } from './Notification';
 import useListPosition from './hooks/useListPosition';
-import useListScroll from './hooks/useListScroll';
 import useStack from './hooks/useStack';
 import { composeRef } from '@rc-component/util/lib/ref';
 
@@ -89,9 +88,12 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
   }, [expanded, offset, stackEnabled, threshold]);
 
   const [gap, setGap] = React.useState(0);
-  const [notificationPosition, setNodeSize] = useListPosition(configList, stackPosition, gap);
-  const { contentRef, onTouchEnd, onTouchMove, onTouchStart, onWheel, scrollOffset, viewportRef } =
-    useListScroll(keyList, notificationPosition, expanded);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const [notificationPosition, setNodeSize, totalHeight] = useListPosition(
+    configList,
+    stackPosition,
+    gap,
+  );
 
   React.useEffect(() => {
     const listNode = contentRef.current;
@@ -122,23 +124,18 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
           [`${prefixCls}-stack-expanded`]: expanded,
         },
       )}
-      onTouchEnd={onTouchEnd}
-      onTouchMove={onTouchMove}
-      onTouchStart={onTouchStart}
-      onWheel={onWheel}
       onMouseEnter={() => {
         setListHovering(true);
       }}
       onMouseLeave={() => {
         setListHovering(false);
       }}
-      ref={viewportRef}
       style={style}
     >
       <div
         className={`${listPrefixCls}-content`}
         style={{
-          transform: `translate3d(0, ${scrollOffset}px, 0)`,
+          height: totalHeight,
         }}
         ref={contentRef}
       >

src/hooks/useListPosition/index.ts

@@ -14,9 +14,10 @@ export default function useListPosition(
 ) {
   const [sizeMap, setNodeSize] = useSizes();
 
-  const notificationPosition = React.useMemo(() => {
+  const [notificationPosition, totalHeight] = React.useMemo(() => {
     let offsetY = 0;
     let offsetBottom = 0;
+    let nextTotalHeight = 0;
     const nextNotificationPosition = new Map<string, NodePosition>();
 
     configList
@@ -31,15 +32,18 @@ export default function useListPosition(
         };
 
         nextNotificationPosition.set(key, nodePosition);
+
+        nextTotalHeight = Math.max(nextTotalHeight, nodePosition.y + height);
+
         if (stack) {
           offsetBottom = nodePosition.y + height;
         } else {
           offsetY += height + gap;
         }
       });
 
-    return nextNotificationPosition;
+    return [nextNotificationPosition, nextTotalHeight] as const;
   }, [configList, gap, sizeMap, stack]);
 
-  return [notificationPosition, setNodeSize] as const;
+  return [notificationPosition, setNodeSize, totalHeight] as const;
 }