fix: scrollbar is shaking when dropdown scroll to bottom #226

bbb169 · 2023-09-05T15:06:43Z

因为是cacheHeight影响了scrollHeight，导致useScrollTo这个hooks触发的三次scroll的offesetTop不同,所以我的思路是,当要加载远距离的节点并且该节点未访问时,先在当前的节点下预加载远距离节点,但不滚动,等远距离节点的缓存高度拿到后,再真正加载远距离节点和滚动

close: ant-design/ant-design#44100

vercel · 2023-09-05T15:06:48Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
virtual-list	❌ Failed (Inspect)			Sep 19, 2023 9:48am

src/List.tsx

src/hooks/useChildren.tsx

zombieJ · 2023-09-06T01:55:39Z

大致逻辑看了一下，可以优化一下成状态机：

scroll hook 里中添加 state:
- 状态：STABLE、MEASURE
- 目标范围 start ~ end
在触发 scrollTo 的时候，计算 index 并且切换至 MEASURE
将 start & end useChildren 做额外渲染
scroll hook 的 useLayoutEffect 中，检查是否为 MEASURE 且 start ~ end 是否 ready
- ready 时 syncTop 并且设置回 STABLE

src/List.tsx

src/hooks/useChildren.tsx

src/List.tsx

src/hooks/useChildren.tsx

zombieJ · 2023-09-12T14:54:03Z

CI 挂了

bbb169 · 2023-09-13T12:19:32Z

codecov · 2023-09-13T13:52:22Z

Codecov Report

Merging #226 (10a4eb8) into master (e578bda) will increase coverage by 0.02%.
The diff coverage is 100.00%.

❗ Current head 10a4eb8 differs from pull request most recent head 9ced492. Consider uploading reports for the commit 9ced492 to get more accurate results

@@            Coverage Diff             @@
##           master     #226      +/-   ##
==========================================
+ Coverage   99.51%   99.53%   +0.02%     
==========================================
  Files          17       19       +2     
  Lines         613      645      +32     
  Branches      128      137       +9     
==========================================
+ Hits          610      642      +32     
  Misses          3        3

Files Changed	Coverage Δ
src/utils/renderChildren.tsx	`100.00% <ø> (ø)`
src/List.tsx	`99.42% <100.00%> (-0.05%)`	⬇️
src/hooks/useCalcPosition.ts	`100.00% <100.00%> (ø)`
src/hooks/useScrollTo.tsx	`100.00% <100.00%> (ø)`
src/utils/scrollToCacheState.ts	`100.00% <100.00%> (ø)`

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

zombieJ · 2023-09-13T16:25:22Z

tests/scroll.test.js

+      // make `collectHeight` work
+      offsetParent: {
+        get: () => true,
+      },


诶？这里只是修了 test case。但是没有给新的代码加 test case~

ok 我加一下

src/hooks/useScrollTo.tsx

zombieJ · 2023-09-14T06:36:49Z

src/hooks/useScrollTo.tsx

+      };
+      //  check cacheHeiht before calculating
+      if (!checkIndexIsCache()) {
+        setScrollToCacheState(MEASURE);


这里应该算出需要知道的范围后直接短路

src/hooks/useScrollTo.tsx

zombieJ · 2023-09-14T06:37:46Z

src/hooks/useScrollTo.tsx

-            syncScrollTop(targetTop);
+            unstable_batchedUpdates(() => {
+              if (startIndex !== undefined ? checkIndexIsCache(startIndex) : checkIndexIsCache()) {
+                setScrollToCacheState(STABLE);


同理，STABLE 不应该是计算时使用。应该是 useLayoutEffect 里更新状态

zombieJ · 2023-09-19T09:59:38Z

src/hooks/useScrollTo.tsx

        if (times < 0 || !containerRef.current) return;

+        // ================== switch cacheState ===================
+        if (times === 3) {


等等，这里还有 times？那是不是直接 times 保持 sync 就好了？我试试去

yoyo837 · 2023-09-20T11:05:28Z

Move to #232

vercel bot had a problem deploying to Preview September 5, 2023 15:09 Failure

zombieJ reviewed Sep 6, 2023

View reviewed changes