Add scrollOffset, scrollSize and scrollToOffset to handle

src/core/scroller.ts

@@ -19,6 +19,7 @@ type ScrollDirection =
 export type Scroller = {
  _initRoot: (rootElement: HTMLElement) => () => void;
  _initItem: (itemElement: HTMLElement, index: number) => () => void;
+ _getScrollPosition: () => number;
  _getScrollDirection: () => ScrollDirection;
  _updateScrollPosition: (offset: number, diff?: boolean) => void;
 };
@@ -132,6 +133,10 @@ export const createScroller = (
  ro.unobserve(el);
  };
  },
+ _getScrollPosition() {
+ if (!rootElement) return 0;
+ return rootElement[scrollToKey];
+ },
  _getScrollDirection() {
  return scrollDirection;
  },

src/core/store.ts

@@ -102,6 +102,7 @@ export type VirtualStore = {
  _getScrollSize(): number;
  _getItemCount(): number;
  _getJump(): ScrollJump;
+ _getItemIndexForScrollTo(offset: number): number;
  _waitForScrollDestinationItemsMeasured(): Promise<void>;
  _subscribe(cb: () => void): () => void;
  _update(action: Actions): void;
@@ -157,6 +158,9 @@ export const createVirtualStore = (
  _getJump() {
  return state._jump;
  },
+ _getItemIndexForScrollTo(offset) {
+ return findStartIndexWithOffset(state._cache, offset, 0, 0);
+ },
  _waitForScrollDestinationItemsMeasured() {
  if (scrollToQueue) {
  // Cancel waiting scrollTo

src/react/List.tsx

@@ -198,11 +198,24 @@ type CustomElementType = keyof JSX.IntrinsicElements | CustomComponent;
  * Methods of {@link List}.
  */
 export interface ListHandle {
+ /**
+ * Get current scrollTop or scrollLeft.
+ */
+ scrollOffset: number;
+ /**
+ * Get current scrollHeight or scrollWidth.
+ */
+ scrollSize: number;
  /**
  * Scroll to the item specified by index.
  * @param index index of item
  */
  scrollToIndex(index: number): void;
+ /**
+ * Scroll to the item specified by offset.
+ * @param offset offset from start
+ */
+ scrollToOffset(offset: number): void;
 }
 
 /**
@@ -388,18 +401,21 @@ export const List = forwardRef<ListHandle, ListProps>(
 
  useImperativeHandle(
  ref,
- () => ({
- scrollToIndex: async (index) => {
+ () => {
+ const getScrollSize = (): number => {
  const el = scrollRef.current;
- if (!el) return;
-
- index = max(min(index, count - 1), 0);
-
+ if (!el) return 0;
+ // Use element's scrollHeight/scrollWidth instead of stored scrollSize.
+ // This is because stored size may differ from the actual size, for example when a new item is added and not yet measured.
+ return isHorizontal ? el.scrollWidth : el.scrollHeight;
+ };
+ const scrollTo = async (
+ index: number,
+ getCurrentOffset: () => number
+ ) => {
  const getOffset = (): number => {
- let offset = store._getItemOffset(index);
- // Use element's scrollHeight/scrollWidth instead of stored scrollSize.
- // This is because stored size may differ from the actual size, for example when a new item is added and not yet measured.
- const scrollSize = isHorizontal ? el.scrollWidth : el.scrollHeight;
+ let offset = getCurrentOffset();
+ const scrollSize = getScrollSize();
  const viewportSize = store._getViewportSize();
  if (scrollSize - (offset + viewportSize) <= 0) {
  // Adjust if the offset is over the end, to get correct startIndex.
@@ -432,8 +448,27 @@ export const List = forwardRef<ListHandle, ListProps>(
  // Sync viewport to scroll destination
  store._update({ _type: HANDLE_SCROLL, _offset: offset });
  }
- },
- }),
+ };
+
+ return {
+ get scrollOffset() {
+ return handle._getScrollPosition();
+ },
+ get scrollSize() {
+ return getScrollSize();
+ },
+ scrollToIndex(index) {
+ index = max(min(index, count - 1), 0);
+
+ scrollTo(index, () => store._getItemOffset(index));
+ },
+ scrollToOffset(offset) {
+ offset = max(offset, 0);
+
+ scrollTo(store._getItemIndexForScrollTo(offset), () => offset);
+ },
+ };
+ },
  [count]
  );
 

stories/basics/List.stories.tsx

@@ -111,33 +111,52 @@ export const Sticky: StoryObj = {
 export const ScrollTo: StoryObj = {
  render: () => {
  const LENGTH = 1000;
- const [dest, setDest] = useState(567);
+ const [scrollIndex, setScrollIndex] = useState(567);
+ const [scrollOffset, setScrollOffset] = useState(1000);
  const ref = useRef<ListHandle>(null);
  return (
  <div>
  <div>
  <input
  type="number"
- value={dest}
+ value={scrollIndex}
  onChange={(e) => {
- setDest(Number(e.target.value));
+ setScrollIndex(Number(e.target.value));
  }}
  />
  <button
  onClick={() => {
- ref.current?.scrollToIndex(dest);
+ ref.current?.scrollToIndex(scrollIndex);
  }}
  >
- scroll
+ scroll to index
  </button>
  <button
  onClick={() => {
- setDest(Math.round(LENGTH * Math.random()));
+ setScrollIndex(Math.round(LENGTH * Math.random()));
  }}
  >
  randomize
  </button>
  </div>
+ <div>
+ <div>
+ <input
+ type="number"
+ value={scrollOffset}
+ onChange={(e) => {
+ setScrollOffset(Number(e.target.value));
+ }}
+ />
+ <button
+ onClick={() => {
+ ref.current?.scrollToOffset(scrollOffset);
+ }}
+ >
+ scroll to offset
+ </button>
+ </div>
+ </div>
  <List ref={ref} style={{ height: "100vh" }}>
  {createRows(LENGTH)}
  </List>