ant-design/ant-design#35221

I recently installed https://github.com/ukrbublik/react-awesome-query-builder/, which is using https://github.com/ant-design/ant-design/ and one of those 2 is using your rc-virtual-list. Can you give me more insight into this "Not find index item." Is this related to the list being removed? 28c069d

Any info you can provide would be helpful. Thanks.

Here is my stack trace if it helps. Sorry there are no filenames.

Not find index item. Please report this since it is a bug.
at List
at OptionList
at div
at div
at PopupInner
at Align
at CSSMotion
at div
at Popup
at Portal
at Trigger
at SelectTrigger
at div
at Select
at Select
at Select
at FieldSelect
at Field
at div
at Col
at FieldWrapper
at div
at Rule
at div
at Draggable
at div
at RuleContainer
at ConnectedRuleContainer
at Item
at div
at Group
at div
at Draggable
at div
at GroupContainer
at ConnectedGroupContainer
at Item
at Builder
at SortableContainer
at ConnectedSortableContainer
at div
at div
at Query
at ConnectedQuery
at Provider
at LocaleProvider
at SizeContextProvider
at LocaleReceiver
at ConfigProvider
at Provider
at renderProvider
at QueryContainer
at div
at PeopleQueryBuilder
at App

antd版本： 4.24.14

问题： 使用普通的Select 组件，当元素个数超过高度需要滚动时，没有出现滚动条。

把rc-virtual-list 版本降低到3.5.3及以前， 可以出现。

当我在做列表和其他区域联动滚动时，发现列表的滚动效果和其他元素区域滚动效果不一样，比较卡顿

This component use 'Number.isNaN' without judgement or rewriting at code

Suggest to consider this.

<List data={[0,1,2,3,4]} height={200} itemHeight={30} itemKey='id'>
    {index => <div>{index}</div>}
</List>

I was just using code above to making a demo for my self, and I got an problem from console

node : 14.15.1
"rc-virtual-list": "^3.3.0"
"react-dom": "^17.0.1",

https://virtual-list-react-component.vercel.app/ Can't open

As the title, there is any proper solution for this case?

Warning about deprecated findDOMNode usage. See react documentation.

ant-design/ant-design#26136

This line of useMobileTouchMove.ts requires a null check on listRef.current:

      listRef.current.removeEventListener('touchstart', onTouchStart);

When a Select component in the latest ant design v4.6.5 is unmounted (ie. removed from the DOM), we get the following exception:

scheduler.development.js?034b:171 Uncaught TypeError: Cannot read property 'removeEventListener' of null
    at eval (useMobileTouchMove.js?684c:64)
    at HTMLUnknownElement.callCallback (react-dom.development.js?4b4a:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?4b4a:3995)
    at invokeGuardedCallback (react-dom.development.js?4b4a:4057)
    at safelyCallDestroy (react-dom.development.js?4b4a:20501)
    at commitHookEffectListUnmount2 (react-dom.development.js?4b4a:20634)
    at commitPassiveUnmount (react-dom.development.js?4b4a:21705)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development.js?4b4a:23600)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development.js?4b4a:23593)
    at flushPassiveUnmountEffectsInsideOfDeletedTree (react-dom.development

I have a list of chat messages. The message height depends on the content.

My code is below. And everything seems to work well, but there is one moment, I can’t find the "overscanRowCount" property. Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices.

Can you do something about the flicker?

const Message = ({ i }: any, ref: any) => {
    return (
        <div
            ref={ref}
            style={{
                border: "1px solid gray",
            }}
        >
            <Avatar />
            message {i}
            // Dynamic height by content
            {i % 2 ? <div style={{ height: 100 }} /> : null}
        </div>
    );
};
const ForwardMessage = React.forwardRef(Message);

const Chat = () => {
      const listRef = React.useRef<any>(null);
      const size = useSize();
  
      // Infinite scroll
      const onScroll = (e: any) => {
          if (e.target.scrollHeight - e.target.scrollTop === size?.height) {
              appendData();
          }
      };
    
        <VirtualList
            ref={listRef}
            data={data}
            height={size?.height}
            itemHeight={30}
            itemKey="email"
            onScroll={onScroll}
        >
            {(item: any, i: any) => <ForwardMessage i={i} {...item} />}
        </VirtualList>
  }

Navigator: chrome 92.0.4515.131 (x86_64)
System: Mac OS Big Sur 11.5 (20G71)

How to reproduction: Chrome's setting: close Hardware Acceleration !important
Now: Can not hover to drag scrollBar when scroll stopped; Can hover to drag when scrolling;
Expect: Can hover to drag scrollBar when scroll stopped; Or hide scrollBar when scroll stopped
Reproduction link: https://rc-virtual-list.react-component.vercel.app/?selectedKind=rc-virtual-list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

如何复现：关闭 chrome 设置里的“硬件加速”
现状：不滚动时不能拖动滚动条；滚动时能拖动滚动条
希望：不滚动时能正常拖动滚动条；或者不滚动时隐藏滚动条
复现地址: https://rc-virtual-list.react-component.vercel.app/?selectedKind=rc-virtual-list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

What motivation to create your own solution?
link: react-window

滚轮滚动或者鼠标拖动滚动条，可以一直向下拖！@zombieJ

Platform: Windows 11
The demo on https://rc-virtual-list.react-component.vercel.app/ works with smooth scrolling on Windows. But the latest examples in this repo does not when running locally with yarn start

#13 8.176 ./node_modules/rc-virtual-list/lib/List.d.ts:5:15
#13 8.176 Type error: ',' expected.
#13 8.176
#13 8.176   3 | import type { ScrollBarDirectionType } from './ScrollBar';
#13 8.176   4 | import type { RenderFunc, ExtraRenderInfo } from './interface';
#13 8.176 > 5 | import { type ScrollPos, type ScrollTarget } from './hooks/useScrollTo';
#13 8.176     |               ^
#13 8.176   6 | export interface ScrollInfo {
#13 8.176   7 |     x: number;
#13 8.176   8 |     y: number;
#13 8.204 npm notice

Hello, today after the update I've been suffering from this problem only when the application builds, I don't use the lib directly as it depended on antd if I'm not mistaken. Does anyone know how to fix?

是否可以指定自定义滚动容器，容器内的其他dom虚拟不虚拟都可以，listItem保证正常虚拟即可

--- antd的下拉菜单中使用导致侧边滚动条失效, 貌似侧边滚动条件监听未生效.

I want to change the scorllbar style， but there is not scrollbar style prop providing

rc-virtual-list >=3.4.3下src/List使用rc-util的useLayoutEffect替换react默认钩子，该方法是rc-util >=5.15.0版本加入的。但rc-virtual-list 依赖的rc-util版本为"rc-util": "^5.0.7"，若安装的rc-util低于5.15.0则会导致打包错误

I have a virtualList, which has nested virtual list, how can i scroll to element in the nested virtual list

We get an error reported from sentry as shown in title.

This line of List.ts requires a null check on listRef.current:

var clientHeight = _this.listRef.current.clientHeight;

Guys please fix this bug
ant-design/ant-design#44539

antd -> rc-select -> rc-virtual-list
It's on your side

建议加入footer配置，很常用

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/rc-virtual-list/es/List.js b/node_modules/rc-virtual-list/es/List.js
index 6346b0d..47c327f 100644
--- a/node_modules/rc-virtual-list/es/List.js
+++ b/node_modules/rc-virtual-list/es/List.js
@@ -284,9 +284,11 @@ export function RawList(props, ref) {
     componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll);
     componentRef.current.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
     return function () {
-      componentRef.current.removeEventListener('wheel', onRawWheel);
-      componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
-      componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+      if (componentRef.current) {
+        componentRef.current.removeEventListener('wheel', onRawWheel);
+        componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
+        componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+      }
     };
   }, [useVirtual]); // ================================= Ref ==================================
 
diff --git a/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js b/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js
index 0fdb2dd..dc4be2c 100644
--- a/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js
+++ b/node_modules/rc-virtual-list/es/hooks/useMobileTouchMove.js
@@ -63,7 +63,9 @@ export default function useMobileTouchMove(inVirtual, listRef, callback) {
     }
 
     return function () {
-      listRef.current.removeEventListener('touchstart', onTouchStart);
+       if (listRef.current) {
+        listRef.current.removeEventListener('touchstart', onTouchStart);
+      }
       cleanUpEvents();
       clearInterval(intervalRef.current);
     };
diff --git a/node_modules/rc-virtual-list/lib/List.js b/node_modules/rc-virtual-list/lib/List.js
index 9d2d517..b6c727b 100644
--- a/node_modules/rc-virtual-list/lib/List.js
+++ b/node_modules/rc-virtual-list/lib/List.js
@@ -311,9 +311,11 @@ function RawList(props, ref) {
     componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll);
     componentRef.current.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
     return function () {
-      componentRef.current.removeEventListener('wheel', onRawWheel);
-      componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
-      componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+      if (componentRef.current) {
+        componentRef.current.removeEventListener('wheel', onRawWheel);
+        componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
+        componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+      }
     };
   }, [useVirtual]); // ================================= Ref ==================================
 
diff --git a/node_modules/rc-virtual-list/lib/hooks/useMobileTouchMove.js b/node_modules/rc-virtual-list/lib/hooks/useMobileTouchMove.js
index a809897..7c20443 100644
--- a/node_modules/rc-virtual-list/lib/hooks/useMobileTouchMove.js
+++ b/node_modules/rc-virtual-list/lib/hooks/useMobileTouchMove.js
@@ -77,7 +77,9 @@ function useMobileTouchMove(inVirtual, listRef, callback) {
     }
 
     return function () {
-      listRef.current.removeEventListener('touchstart', onTouchStart);
+      if (listRef.current) {
+        listRef.current.removeEventListener('touchstart', onTouchStart);
+      }
       cleanUpEvents();
       clearInterval(intervalRef.current);
     };

This issue body was partially generated by patch-package.

如题，现在新版的新浪微博用的是 vue，他也用了 virtual-list 这种功能，主体内容部分不需要设置固定的高度，还是使用浏览器的滚动条，信息流区域没有自己的滚动条。

和这个功能类似：https://bvaughn.github.io/react-virtualized/#/components/WindowScroller
还有这个：https://bvaughn.github.io/react-virtualized/#/components/Masonry 不过要勾选里面的一个选项 Use WindowScroller?

为啥不直接用上在的库呢，他太大了，想要个轻量的，希望可以采纳。

it can not cusomized the same as the native windows bar without scrollbar buttons.
没有滚动条上的两个按钮，很难自定义出类似window原生的滚动条。

Is it possible to have a dynamic line height or am I overlooking the feature?

What I would like to have:

const dynLineHeight = (row: any, index: number) => {
	if(index % 2 === 0){
		return 50;
	} else {
		return 25;
	}
}

<List data={[0, 1, 2]} height={200} itemHeight={this.dynLineHeight} itemKey="id">
  {index => <div>{index}</div>}
</List>;

如题

This error is thrown "React 17: Cannot read property 'removeEventListener' of null" when using React 17, unmounting

  217 | React.useEffect(function () {
  218 |   componentRef.current.addEventListener('wheel', onRawWheel);
  219 |   return function () {
> 220 |     componentRef.current.removeEventListener('wheel', onRawWheel);
      | ^  221 |   };
  222 | }, [inVirtual]); // ================================= Ref ==================================
  223 | 

Version 3.5.1 is throwing a type error from inside node_modules:

../../common/temp/node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/rc-virtual-list/lib/List.d.ts:38:89 - error TS2694: Namespace 'React' has no exported member 'JSX'.

38 export declare function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>): React.JSX.Element;
                                                                                           ~~~

../../common/temp/node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/rc-virtual-list/lib/ScrollBar.d.ts:42:21 - error TS2694: Namespace 'React' has no exported member 'JSX'.

42     render(): React.JSX.Element;
                       ~~~


Found 2 errors in 2 files.

Errors  Files
     1  ../../common/temp/node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/rc-virtual-list/lib/List.d.ts:38
     1  ../../common/temp/node_modules/.pnpm/[email protected]_sfoxds7t5ydpegc3knd667wn6m/node_modules/rc-virtual-list/lib/ScrollBar.d.ts:42

我在dropdownRender中添加了Spin，dropdownRender={(menu) => {menu}}
展开下拉框后将滚动条向下滚动，关闭下拉框，再展开后，火狐在loading时，以及loading结束后，下拉框内展示空白，需要再次滚动条，数据才会显示。
关闭虚拟滚动后将没有此问题。

如题，想在 onScroll 事件中区分滚动是被谁触发的，目前从参数中无法判断出来，请问有其他方式可以判断吗，或者是我使用姿势不对？

场景：上滑加载历史评论（每条都是两行显示）与原来的评论（每条都是一行显示）合并渲染时（合并操作为原来的列表内容向前追加历史评论），新加入的历史评论内容滚动时出现抖动情况，怀疑时新加入的评论itemHeight和原来不统一导致的。

We would like to utilize the nowrap for our item's label.
Actually, we are using the Tree component from Ant, with virtual scroll enabled.

As a workaround we managed to get the horizontal scrollbar enabled (adding css styles ourself), but this actually overlaps the last item in list.

You see any way to get that horizontal scroll enabled by virtual-list component natively?

The data changes frequently, but the scrollTop is still the last set, and the start and end calculations may be exceptions

By default, scrollbar disappears after 2 seconds.

delayHidden = () => {
    clearTimeout(this.visibleTimeout);

    this.setState({ visible: true });
    this.visibleTimeout = setTimeout(() => {
      this.setState({ visible: false });
    }, 2000);
  };

It'd be helpful to be able to choose the delay or not. From user experience side, this causes some confusion

This bug can be reproduced in versions 1.1.1 and 3.2.6

ipad双指在列表区域滑动下，就不能在滑动，单指也失效了。

背景

在操作的过程中，想回到之前操作的行

目的

列表滚动到指定的行

Intro

I wanna change the background of thumb, but this style is an inline style so that I can't rewrite it.