Add align: center option to scrollToIndex

src/core/scroller.ts

@@ -214,6 +214,10 @@ export const createScroller = (
  store._getItemOffset(index) +
  store._getItemSize(index) -
  store._getViewportSize()
+ : align === "center"
+ ? () =>
+ store._getItemOffset(index) +
+ (store._getItemSize(index) - store._getViewportSize()) / 2
  : () => store._getItemOffset(index)
  );
  },

src/core/types.ts

@@ -20,6 +20,7 @@ export interface CacheSnapshot {
  * Alignment of item when calling scrollToIndex method.
  *
  * - `start`(default): Align the item to the start of the list.
+ * - `center`: Align the item to the center of the list.
  * - `end`: Align the item to the end of the list.
  */
-export type ScrollToIndexAlign = "start" | "end";
+export type ScrollToIndexAlign = "start" | "center" | "end";

stories/basics/VList.stories.tsx

@@ -246,6 +246,17 @@ export const ScrollTo: StoryObj = {
  />
  start
  </label>
+ <label style={{ marginLeft: 4 }}>
+ <input
+ type="radio"
+ style={{ marginLeft: 4 }}
+ checked={scrollIndexAlign === "center"}
+ onChange={() => {
+ setScrollToIndexAlign("center");
+ }}
+ />
+ center
+ </label>
  <label style={{ marginLeft: 4 }}>
  <input
  type="radio"