handle Safari elasticity effect

Author: zombieJ

src/List.tsx

@@ -9,6 +9,7 @@ import {
   GHOST_ITEM_KEY,
   getItemRelativeTop,
   getCompareItemRelativeTop,
+  alignScrollTop,
 } from './utils/itemUtil';
 import { getIndexByStartLoc, findListDiffIndex } from './utils/algorithmUtil';
 
@@ -227,7 +228,8 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
   public onScroll = () => {
     const { dataSource, height, itemHeight, disabled } = this.props;
 
-    const { scrollTop } = this.listRef.current;
+    const { scrollTop: originScrollTop, clientHeight, scrollHeight } = this.listRef.current;
+    const scrollTop = alignScrollTop(originScrollTop, scrollHeight - clientHeight);
 
     // Skip if `scrollTop` not change to avoid shake
     if (scrollTop === this.state.scrollTop || this.lockScroll || disabled) {

src/utils/itemUtil.ts

@@ -32,6 +32,21 @@ function getLocationItem(scrollPtg: number, total: number): LocationItemResult {
   };
 }
 
+/**
+ * Safari has the elasticity effect which provides negative `scrollTop` value.
+ * We should ignore it since will make scroll animation shake.
+ */
+export function alignScrollTop(scrollTop: number, scrollRange: number) {
+  if (scrollTop < 0) {
+    return 0;
+  }
+  if (scrollTop >= scrollRange) {
+    return scrollRange;
+  }
+
+  return scrollTop;
+}
+
 export function getScrollPercentage({
   scrollTop,
   scrollHeight,
@@ -45,7 +60,9 @@ export function getScrollPercentage({
     return 0;
   }
 
-  const scrollTopPtg = scrollTop / (scrollHeight - clientHeight);
+  const scrollRange = scrollHeight - clientHeight;
+  const alignedScrollTop = alignScrollTop(scrollTop, scrollRange);
+  const scrollTopPtg = alignedScrollTop / scrollRange;
   return scrollTopPtg;
 }