Add scroll snapping for paging in (#2548)

InfiniteScrollList
showtime-xyz · Nov 22, 2023 · 9ae1a05 · 9ae1a05
1 parent d17f6ed
commit 9ae1a05
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/design-system/infinite-scroll-list/infinite-scroll-list.web.tsx b/packages/design-system/infinite-scroll-list/infinite-scroll-list.web.tsx
@@ -44,6 +44,7 @@ function InfiniteScrollListImpl<Item>(
     renderItem,
     extraData,
     onViewableItemsChanged,
+    pagingEnabled,
     viewabilityConfig,
     ItemSeparatorComponent,
     estimatedItemSize,
@@ -227,6 +228,7 @@ function InfiniteScrollListImpl<Item>(
                   flexGrow: 1,
                   //@ts-ignore
                   ...style,
+                  "scroll-snap-type": pagingEnabled ? "y mandatory" : undefined,
                 }
               : {}
           }
@@ -281,7 +283,12 @@ function InfiniteScrollListImpl<Item>(
                     key={virtualItem.key}
                     data-index={index}
                     ref={rowVirtualizer.measureElement}
-                    style={{ width: "100%", ...transformStyle }}
+                    style={{
+                      width: "100%",
+                      ...transformStyle,
+                      // @ts-ignore
+                      "scroll-snap-align": pagingEnabled ? "start" : undefined,
+                    }}
                   >
                     {typeof data?.[index] !== "undefined" ? (
                       <div