fix: adjust inVirtual logic(#227) #262

NameWjp · 2024-03-29T02:27:37Z

复现步骤：

修改 examples 中 height 例子，将 data 数据调整为 10 条，目前能够滚动，但是没有滚动条
调整逻辑后滚动条正常显示

close #243
close ant-design/ant-design#45935 again

vercel · 2024-03-29T02:27:42Z

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

Name	Status	Preview	Comments	Updated (UTC)
virtual-list	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2024 4:59pm

beautiful-boyyy · 2024-04-01T02:18:13Z

是不是你antd版本太低了，最新版本没这问题了

NameWjp · 2024-04-01T02:39:32Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

beautiful-boyyy · 2024-04-01T03:19:24Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

提供一个codesandbox demo吧

NameWjp · 2024-04-01T06:46:29Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

提供一个codesandbox demo吧

codesandbox

beautiful-boyyy · 2024-04-01T07:09:10Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

提供一个codesandbox demo吧

codesandbox

貌似没权限

NameWjp · 2024-04-01T07:13:20Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

提供一个codesandbox demo吧

codesandbox

貌似没权限

忘记开了，再试下

beautiful-boyyy · 2024-04-01T07:53:45Z

@beautiful-boyyy 不是，你按照我的步骤是可以复现的，只是这个问题出现的概率较小（实际上就是你传入的：最小高度 * 数量 < 容器高度，但是 item 每一项的实际高度相加后 > 容器高度时，就会出现这个问题），最新版本的 antd 的虚拟滚动都有这个问题

提供一个codesandbox demo吧

codesandbox

你提供的demo没有用到antd List，antd List没有暴露 height，itemHeight接口，之前的bug也在前几个版本就修复了，virtual-list这里的逻辑确实有问题，单独使用的话确实会有bug，我之前也提了一个pr，但是测试没跑过，你可能需要提供正确的测试用例。

NameWjp · 2024-04-03T03:06:51Z

@zombieJ @yoyo837 这个 bug 可以看一下吗，需要咋调整下？

yoyo837 · 2024-04-03T07:29:29Z

src/List.tsx

  // ================================= MISC =================================
  const useVirtual = !!(virtual !== false && height && itemHeight);
-  const inVirtual = useVirtual && data && (itemHeight * data.length > height || !!scrollWidth);
+  const containerHeight = React.useMemo(() =>  Object.values(heights.maps).reduce((total, curr) => total + curr, 0), [heights.id])


heights.maps 不需要 memo deps吗？

heights.maps 引用压根不会变，不过确实加上更好点

src/List.tsx

yoyo837 · 2024-04-03T07:30:36Z

用例能覆盖到吗？

src/List.tsx

NameWjp · 2024-04-04T10:52:04Z

用例能覆盖到吗？

测试已经加上了，本地跑的没啥问题

codecov · 2024-04-04T14:22:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.24%. Comparing base (e8e9aeb) to head (306dfcd).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #262   +/-   ##
=======================================
  Coverage   98.23%   98.24%           
=======================================
  Files          18       18           
  Lines         681      684    +3     
  Branches      160      163    +3     
=======================================
+ Hits          669      672    +3     
  Misses         12       12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

yoyo837 · 2024-04-04T14:22:19Z

src/List.tsx

@@ -307,6 +308,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
  const getVirtualScrollInfo = () => ({
    x: isRTL ? -offsetLeft : offsetLeft,
    y: offsetTop,
+    maxScrollWidth: !!scrollWidth ? scrollWidth - size.width : 0,
+    maxScrollHeight: scrollHeight > height ? maxScrollHeight : 0,


这个的计算我怎么有点没看懂

maxScrollWidth：scrollWidth 可能不传，所以这里加了个判断。
maxScrollHeight：这里 scrollHeight 是取的 fillerInnerRef.current?.offsetHeight（感觉这里应该取容器的 scrollHeight），会出现 scrollHeight 小于容器 height 的情况，所以要做个判断

这俩属性和bugfix无关，我发PR去掉先。

tests/scroll.test.js

NameWjp · 2024-04-18T02:19:37Z

@yoyo837 麻烦问下有发版计划吗，有个项目用的这个包，想修复这个问题

yoyo837 · 2024-04-18T02:30:09Z

已知会Owner.

zombieJ · 2024-04-18T03:02:22Z

src/List.tsx

@@ -307,6 +308,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
  const getVirtualScrollInfo = () => ({
    x: isRTL ? -offsetLeft : offsetLeft,
    y: offsetTop,
+    maxScrollWidth: !!scrollWidth ? scrollWidth - size.width : 0,


尽量避免给测试用的打孔，这个去掉吧。测试换种方式测

yoyo837 · 2024-04-18T03:24:09Z

@yoyo837 麻烦问下有发版计划吗，有个项目用的这个包，想修复这个问题

https://github.com/react-component/virtual-list/releases/tag/v3.11.5

NameWjp · 2024-04-18T05:54:58Z

@yoyo837 麻烦问下有发版计划吗，有个项目用的这个包，想修复这个问题

https://github.com/react-component/virtual-list/releases/tag/v3.11.5

ok

fix: adjust inVirtual logic(#227)

f92dce2

vercel bot deployed to Preview March 29, 2024 02:29 View deployment

feat: support detection size(#256)

a09308b

vercel bot deployed to Preview March 29, 2024 02:58 View deployment

fix: check whether scrollWidth exist(#261)

479a109

vercel bot deployed to Preview March 29, 2024 03:21 View deployment

yoyo837 reviewed Apr 3, 2024

View reviewed changes

src/List.tsx Outdated Show resolved Hide resolved

github-advanced-security bot found potential problems Apr 3, 2024

View reviewed changes

src/List.tsx Fixed Show fixed Hide fixed

NameWjp added 2 commits April 4, 2024 17:11

fix: fix maxScrollHeight negative

a6a00fe

test: add scrollbar thumb test

bb65230

vercel bot deployed to Preview April 4, 2024 10:51 View deployment

yoyo837 reviewed Apr 4, 2024

View reviewed changes

tests/scroll.test.js Show resolved Hide resolved

fix: add annotation

306dfcd

vercel bot deployed to Preview April 5, 2024 16:59 View deployment

yoyo837 approved these changes Apr 5, 2024

View reviewed changes

yoyo837 merged commit 34ec0e7 into react-component:master Apr 5, 2024
10 checks passed

yoyo837 mentioned this pull request Apr 5, 2024

Error: NaN is an invalid value for the marginLeft css style property. #261

Closed

zombieJ reviewed Apr 18, 2024

View reviewed changes

yoyo837 mentioned this pull request Apr 18, 2024

chore: remove maxScrollWidth and maxScrollHeight #264

Merged

wq758511990 mentioned this pull request Jun 4, 2024

select 滚动条，数据量在9条10条的时候，不展示滚动样式 ant-design/pro-components#8468

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: adjust inVirtual logic(#227) #262

fix: adjust inVirtual logic(#227) #262

NameWjp commented Mar 29, 2024 •

edited by yoyo837

Loading

vercel bot commented Mar 29, 2024 •

edited

Loading

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 3, 2024

yoyo837 Apr 3, 2024

NameWjp Apr 4, 2024

yoyo837 commented Apr 3, 2024

NameWjp commented Apr 4, 2024

codecov bot commented Apr 4, 2024 •

edited

Loading

yoyo837 Apr 4, 2024

NameWjp Apr 5, 2024 •

edited

Loading

yoyo837 Apr 18, 2024

yoyo837 Apr 18, 2024

NameWjp commented Apr 18, 2024

yoyo837 commented Apr 18, 2024

zombieJ Apr 18, 2024

yoyo837 Apr 18, 2024

yoyo837 commented Apr 18, 2024

NameWjp commented Apr 18, 2024

fix: adjust inVirtual logic(#227) #262

fix: adjust inVirtual logic(#227) #262

Conversation

NameWjp commented Mar 29, 2024 • edited by yoyo837 Loading

vercel bot commented Mar 29, 2024 • edited Loading

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 1, 2024

beautiful-boyyy commented Apr 1, 2024

NameWjp commented Apr 3, 2024

yoyo837 Apr 3, 2024

Choose a reason for hiding this comment

NameWjp Apr 4, 2024

Choose a reason for hiding this comment

yoyo837 commented Apr 3, 2024

NameWjp commented Apr 4, 2024

codecov bot commented Apr 4, 2024 • edited Loading

Codecov Report

yoyo837 Apr 4, 2024

Choose a reason for hiding this comment

NameWjp Apr 5, 2024 • edited Loading

Choose a reason for hiding this comment

yoyo837 Apr 18, 2024

Choose a reason for hiding this comment

yoyo837 Apr 18, 2024

Choose a reason for hiding this comment

NameWjp commented Apr 18, 2024

yoyo837 commented Apr 18, 2024

zombieJ Apr 18, 2024

Choose a reason for hiding this comment

yoyo837 Apr 18, 2024

Choose a reason for hiding this comment

yoyo837 commented Apr 18, 2024

NameWjp commented Apr 18, 2024

NameWjp commented Mar 29, 2024 •

edited by yoyo837

Loading

vercel bot commented Mar 29, 2024 •

edited

Loading

codecov bot commented Apr 4, 2024 •

edited

Loading

NameWjp Apr 5, 2024 •

edited

Loading