virtual scroll it

Author: zombieJ

.eslintrc.js

@@ -2,4 +2,10 @@ const base = require('@umijs/fabric/dist/eslint');
 
 module.exports = {
   ...base,
+  rules: {
+    ...base.rules,
+    '@typescript-eslint/no-explicit-any': 0,
+    'react/no-did-update-set-state': 0,
+    'react/no-find-dom-node': 0,
+  },
 };

examples/basic.tsx

@@ -25,25 +25,55 @@ const MyItem: React.FC<Item> = ({ id }, ref) => {
 
 const ForwardMyItem = React.forwardRef(MyItem);
 
+class TestItem extends React.Component {
+  render() {
+    return <div style={{ lineHeight: '30px' }}>{this.props.id}</div>;
+  }
+}
+
 const dataSource: Item[] = [];
 for (let i = 0; i < 100; i += 1) {
   dataSource.push({
     id: i,
   });
 }
 
+const TYPES = [
+  { name: 'ref real dom element', type: 'dom', component: ForwardMyItem },
+  { name: 'ref react node', type: 'react', component: TestItem },
+];
+
 const Demo = () => {
+  const [type, setType] = React.useState('dom');
+
   return (
     <React.StrictMode>
       <div>
         <h2>Basic</h2>
+        {TYPES.map(({ name, type: nType }) => (
+          <label key={nType}>
+            <input
+              name="type"
+              type="radio"
+              checked={type === nType}
+              onChange={() => {
+                setType(nType);
+              }}
+            />
+            {name}
+          </label>
+        ))}
+
         <List
           dataSource={dataSource}
           height={200}
           itemHeight={30}
-          style={{ border: '1px solid red', boxSizing: 'border-box' }}
+          style={{
+            border: '1px solid red',
+            boxSizing: 'border-box',
+          }}
         >
-          {item => <ForwardMyItem {...item} />}
+          {item => (type === 'dom' ? <ForwardMyItem {...item} /> : <TestItem {...item} />)}
         </List>
       </div>
     </React.StrictMode>

package.json

@@ -35,7 +35,8 @@
     "now-build": "npm run build"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.135",

src/Filler.tsx

@@ -1,16 +1,22 @@
 import * as React from 'react';
 
 interface FillerProps {
+  /** Virtual filler height. Should be `count * itemMinHeight` */
   height: number;
+  /** Set offset of visible items. Should be the top of start item position */
+  offset: number;
+
+  children: React.ReactNode;
 }
 
 /**
  * Fill component to provided the scroll content real height.
  */
-const Filler: React.FC<FillerProps> = ({ height, children }) => (
+const Filler: React.FC<FillerProps> = ({ height, offset, children }): React.ReactElement => (
   <div style={{ height, position: 'relative', overflow: 'hidden' }}>
     <div
       style={{
+        marginTop: offset,
         position: 'absolute',
         left: 0,
         right: 0,

src/List.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { findDOMNode } from 'react-dom';
 import Filler from './Filler';
-import { getLocationItem, getScrollPercentage } from './util';
+import { getLocationItem, getScrollPercentage, getNodeHeight } from './util';
 
 type RenderFunc<T> = (item: T) => React.ReactNode;
 
@@ -16,6 +15,8 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
 interface ListState {
   status: 'NONE' | 'MEASURE_START' | 'MEASURE_DONE';
 
+  scrollTop: number | null;
+  scrollPtg: number;
   itemIndex: number;
   itemOffsetPtg: number;
   startIndex: number;
@@ -40,6 +41,8 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
 
   state: ListState = {
     status: 'NONE',
+    scrollTop: null,
+    scrollPtg: 0,
     itemIndex: 0,
     itemOffsetPtg: 0,
     startIndex: 0,
@@ -50,65 +53,83 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
 
   itemElements: { [index: number]: HTMLElement } = {};
 
+  itemElementHeights: { [index: number]: number } = {};
+
   /**
-   * Initial should sync with default scroll top
+   * Phase 1: Initial should sync with default scroll top
    */
   public componentDidMount() {
     this.listRef.current.scrollTop = 0;
     this.onScroll();
   }
 
+  /**
+   * Phase 4: Record used item height
+   * Phase 5: Trigger re-render to use correct position
+   */
   public componentDidUpdate() {
     const { status, startIndex, endIndex } = this.state;
     if (status === 'MEASURE_START') {
-      const heightList: number[] = [];
+      // Record here since measure item height will get warning in `render`
       for (let index = startIndex; index <= endIndex; index += 1) {
-        const element: HTMLElement = this.itemElements[index];
-        heightList[index] =
-          'offsetHeight' in element
-            ? element.offsetHeight
-            : (findDOMNode(element) as HTMLElement).offsetHeight;
+        this.itemElementHeights[index] = getNodeHeight(this.itemElements[index]);
       }
+
       this.setState({ status: 'MEASURE_DONE' });
     }
   }
 
+  public getItemHeight = (index: number) => this.itemElementHeights[index] || 0;
+
   /**
    * Phase 2: Trigger render since we should re-calculate current position.
    */
   public onScroll = () => {
     const { dataSource, height, itemHeight } = this.props;
 
-    const scrollTopPtg = getScrollPercentage(this.listRef.current);
-    const { index, offsetPtg } = getLocationItem(scrollTopPtg, dataSource.length);
+    const { scrollTop } = this.listRef.current;
+
+    // Skip if `scrollTop` not change to avoid shake
+    if (scrollTop === this.state.scrollTop) {
+      return;
+    }
+
+    const scrollPtg = getScrollPercentage(this.listRef.current);
+
+    const { index, offsetPtg } = getLocationItem(scrollPtg, dataSource.length);
     const visibleCount = Math.ceil(height / itemHeight);
 
-    const beforeCount = Math.ceil(scrollTopPtg * visibleCount);
-    const afterCount = Math.ceil((1 - scrollTopPtg) * visibleCount);
+    const beforeCount = Math.ceil(scrollPtg * visibleCount);
+    const afterCount = Math.ceil((1 - scrollPtg) * visibleCount);
 
     this.setState({
       status: 'MEASURE_START',
+      scrollTop,
+      scrollPtg,
       itemIndex: index,
       itemOffsetPtg: offsetPtg,
       startIndex: Math.max(0, index - beforeCount),
       endIndex: Math.min(dataSource.length - 1, index + afterCount),
     });
   };
 
-  public renderChildren = (list: T[], renderFunc: RenderFunc<T>) =>
+  /**
+   * Phase 4: Render item and get all the visible items height
+   */
+  public renderChildren = (list: T[], startIndex: number, renderFunc: RenderFunc<T>) =>
     // We should measure rendered item height
-     list.map((item, index) => {
+    list.map((item, index) => {
       const node = renderFunc(item) as React.ReactElement;
+      const eleIndex = startIndex + index;
 
       // Pass `key` and `ref` for internal measure
       return React.cloneElement(node, {
-        key: index,
+        key: eleIndex,
         ref: (ele: HTMLElement) => {
-          this.itemElements[index] = ele;
+          this.itemElements[eleIndex] = ele;
         },
       });
-    })
-  ;
+    });
 
   public render() {
     const {
@@ -125,28 +146,44 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     if (height === undefined) {
       return (
         <Component style={style} {...restProps}>
-          {this.renderChildren(dataSource, children)}
+          {this.renderChildren(dataSource, 0, children)}
         </Component>
       );
     }
 
-    const { itemIndex, startIndex, endIndex } = this.state;
+    const { status, startIndex, endIndex, itemIndex, itemOffsetPtg, scrollPtg } = this.state;
 
     const contentHeight = dataSource.length * itemHeight;
 
+    // TODO: refactor
+    let startItemTop = 0;
+    if (status === 'MEASURE_DONE') {
+      const locatedItemHeight = this.getItemHeight(itemIndex);
+      const locatedItemTop = scrollPtg * this.listRef.current.clientHeight;
+      const locatedItemOffset = itemOffsetPtg * locatedItemHeight;
+      const locatedItemMergedTop =
+        this.listRef.current.scrollTop + locatedItemTop - locatedItemOffset;
+
+      startItemTop = locatedItemMergedTop;
+      for (let index = itemIndex - 1; index >= startIndex; index -= 1) {
+        startItemTop -= this.getItemHeight(index);
+      }
+    }
+
     return (
       <Component
         style={{
           ...style,
           height,
           overflowY: 'auto',
+          overflowAnchor: 'none',
         }}
         {...restProps}
         onScroll={this.onScroll}
         ref={this.listRef}
       >
-        <Filler height={contentHeight}>
-          {this.renderChildren(dataSource.slice(startIndex, endIndex + 1), children)}
+        <Filler height={contentHeight} offset={status === 'MEASURE_DONE' ? startItemTop : 0}>
+          {this.renderChildren(dataSource.slice(startIndex, endIndex + 1), startIndex, children)}
         </Filler>
       </Component>
     );

src/util.ts

@@ -1,3 +1,5 @@
+import { findDOMNode } from 'react-dom';
+
 interface LocationItemResult {
   /** Located item index */
   index: number;
@@ -9,13 +11,13 @@ interface LocationItemResult {
  * Get location item and its align percentage with the scroll percentage.
  * We should measure current scroll position to decide which item is the location item.
  * And then fill the top count and bottom count with the base of location item.
+ *
+ * `total` should be the real count instead of `total - 1` in calculation.
  */
 export function getLocationItem(scrollPtg: number, total: number): LocationItemResult {
-  const measureTotal = total - 1;
-
-  const itemIndex = Math.floor(scrollPtg * measureTotal);
-  const itemTopPtg = itemIndex / measureTotal;
-  const itemBottomPtg = (itemIndex + 1) / measureTotal;
+  const itemIndex = Math.floor(scrollPtg * total);
+  const itemTopPtg = itemIndex / total;
+  const itemBottomPtg = (itemIndex + 1) / total;
   const itemOffsetPtg = (scrollPtg - itemTopPtg) / (itemBottomPtg - itemTopPtg);
 
   return {
@@ -33,3 +35,17 @@ export function getScrollPercentage(element: HTMLElement | null) {
   const scrollTopPtg = scrollTop / (scrollHeight - clientHeight);
   return scrollTopPtg;
 }
+
+/**
+ * Get node `offsetHeight`. We prefer node is a dom element directly.
+ * But if not provided, downgrade to `findDOMNode` to get the real dom element.
+ */
+export function getNodeHeight(node: HTMLElement) {
+  if (!node) {
+    return 0;
+  }
+
+  return 'offsetHeight' in node
+    ? node.offsetHeight
+    : (findDOMNode(node) as HTMLElement).offsetHeight;
+}