feat: support mouse down scroll

Author: zombieJ

src/List.tsx

@@ -15,6 +15,7 @@ import { useGetSize } from './hooks/useGetSize';
 import useHeights from './hooks/useHeights';
 import useMobileTouchMove from './hooks/useMobileTouchMove';
 import useOriginScroll from './hooks/useOriginScroll';
+import useScrollDrag from './hooks/useScrollDrag';
 import type { ScrollPos, ScrollTarget } from './hooks/useScrollTo';
 import useScrollTo from './hooks/useScrollTo';
 import type { ExtraRenderInfo, GetKey, RenderFunc, SharedConfig } from './interface';
@@ -436,6 +437,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     return false;
   });
 
+  // MouseDown drag for scroll
+  useScrollDrag(inVirtual, componentRef, (offset) => {
+    syncScrollTop((top) => top + offset);
+  });
+
   useLayoutEffect(() => {
     // Firefox only
     function onMozMousePixelScroll(e: WheelEvent) {

src/ScrollBar.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import raf from 'rc-util/lib/raf';
 import * as React from 'react';
+import { getPageXY } from './hooks/useScrollDrag';
 
 export type ScrollBarDirectionType = 'ltr' | 'rtl';
 
@@ -23,14 +24,6 @@ export interface ScrollBarRef {
   delayHidden: () => void;
 }
 
-function getPageXY(
-  e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
-  horizontal: boolean,
-) {
-  const obj = 'touches' in e ? e.touches[0] : e;
-  return obj[horizontal ? 'pageX' : 'pageY'];
-}
-
 const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) => {
   const {
     prefixCls,

src/hooks/useScrollDrag.ts

@@ -0,0 +1,79 @@
+import raf from 'rc-util/lib/raf';
+import * as React from 'react';
+
+function smoothScrollOffset(offset: number) {
+  return Math.floor(offset ** 0.5);
+}
+
+export function getPageXY(
+  e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+  horizontal: boolean,
+) {
+  const obj = 'touches' in e ? e.touches[0] : e;
+  return obj[horizontal ? 'pageX' : 'pageY'];
+}
+
+export default function useScrollDrag(
+  inVirtual: boolean,
+  componentRef: React.RefObject<HTMLElement>,
+  onScrollOffset: (offset: number) => void,
+) {
+  React.useEffect(() => {
+    const ele = componentRef.current;
+    if (inVirtual && ele) {
+      let mouseDownLock = false;
+      let rafId: number;
+      let offset: number;
+
+      const stopScroll = () => {
+        raf.cancel(rafId);
+      };
+
+      const continueScroll = () => {
+        stopScroll();
+
+        rafId = raf(() => {
+          onScrollOffset(offset);
+          continueScroll();
+        });
+      };
+
+      const onMouseDown = () => {
+        mouseDownLock = true;
+      };
+      const onMouseUp = () => {
+        mouseDownLock = false;
+        stopScroll();
+      };
+      const onMouseMove = (e: MouseEvent) => {
+        if (mouseDownLock) {
+          const mouseY = getPageXY(e, false);
+          const { top, bottom } = ele.getBoundingClientRect();
+
+          if (mouseY <= top) {
+            const diff = top - mouseY;
+            offset = smoothScrollOffset(diff);
+            continueScroll();
+          } else if (mouseY >= bottom) {
+            const diff = mouseY - bottom;
+            offset = smoothScrollOffset(diff);
+            continueScroll();
+          } else {
+            stopScroll();
+          }
+        }
+      };
+
+      ele.addEventListener('mousedown', onMouseDown);
+      ele.ownerDocument.addEventListener('mouseup', onMouseUp);
+      ele.ownerDocument.addEventListener('mousemove', onMouseMove);
+
+      return () => {
+        ele.removeEventListener('mousedown', onMouseDown);
+        ele.ownerDocument.removeEventListener('mouseup', onMouseUp);
+        ele.ownerDocument.removeEventListener('mousemove', onMouseMove);
+        stopScroll();
+      };
+    }
+  }, [inVirtual]);
+}