feat: support offset (#63)

Author: zombieJ

examples/basic.tsx

@@ -113,6 +113,30 @@ const Demo = () => {
         >
           Scroll To 50 (auto)
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            listRef.current.scrollTo({
+              index: 50,
+              align: 'top',
+              offset: 15,
+            });
+          }}
+        >
+          Scroll To 50 (top) + 15 offset
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            listRef.current.scrollTo({
+              index: 50,
+              align: 'bottom',
+              offset: 15,
+            });
+          }}
+        >
+          Scroll To 50 (bottom) + 15 offset
+        </button>
         <button
           type="button"
           onClick={() => {

src/List.tsx

@@ -24,10 +24,12 @@ export type ScrollConfig =
   | {
       index: number;
       align?: ScrollAlign;
+      offset?: number;
     }
   | {
       key: React.Key;
       align?: ScrollAlign;
+      offset?: number;
     };
 export type ScrollTo = (arg: number | ScrollConfig) => void;
 export type ListRef = {

src/hooks/useScrollTo.tsx

@@ -16,7 +16,7 @@ export default function useScrollTo<T>(
 ): ScrollTo {
   const scrollRef = React.useRef<number>();
 
-  return arg => {
+  return (arg) => {
     raf.cancel(scrollRef.current);
 
     if (typeof arg === 'number') {
@@ -28,9 +28,11 @@ export default function useScrollTo<T>(
       if ('index' in arg) {
         ({ index } = arg);
       } else {
-        index = data.findIndex(item => getKey(item) === arg.key);
+        index = data.findIndex((item) => getKey(item) === arg.key);
       }
 
+      const { offset = 0 } = arg;
+
       // We will retry 3 times in case dynamic height shaking
       const syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
         if (times < 0 || !containerRef.current) return;
@@ -66,10 +68,10 @@ export default function useScrollTo<T>(
 
           switch (mergedAlign) {
             case 'top':
-              targetTop = itemTop;
+              targetTop = itemTop - offset;
               break;
             case 'bottom':
-              targetTop = itemBottom - height;
+              targetTop = itemBottom - height + offset;
               break;
 
             default: {