Javascript 跟踪react窗口渲染的项目的可见性

我一直在寻找一种方法，来知道当使用react窗口时，哪个列表项在屏幕上是可见的

isVisible道具错误地返回可见性

从“React”导入React；
从“react dom”导入{render}；
从“反应窗口”导入{FixedSizeList as List}；
从“react虚拟化自动大小调整器”导入自动大小调整器；
从“屏幕上反应”导入TrackVisibility；
导入“/styles.css”；
常量行=（{index，style，isVisible}）=>(
行{index+”是“+isVisible}
);
常量行包装器=（{index，style}）=>(
);
常量示例=（）=>(
{（{高度，宽度}）=>(
{RowWrapper}
)}
);
render（，document.getElementById（“根”））；

---

这可能是因为项目的缓存，但我想知道是否有其他方法可以跟踪项目的可见性

我自己找到了。请在以下位置找到代码沙盒：

动态采集器列表-

通过捕获onWheel事件并将“tops”与clientHeight和ListHeight进行比较

固定大小列表-

也基于onWheel事件

它不适用于屏幕上的react

---

如果有人知道更好的方法，请回答。

我可以通过听onwheel on OutRelementType和做一些数学运算来获取可见的项目。但这些都是针对fixedsize的，不知道如何为dynamicsizelist实现。

import React from "react";
import { render } from "react-dom";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import TrackVisibility from "react-on-screen";

import "./styles.css";

const Row = ({ index, style, isVisible }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index + " is" + isVisible}
  </div>
);
const RowWrapper = ({ index, style }) => (
  <TrackVisibility>
    <Row index={index} style={style} />
  </TrackVisibility>
);

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {RowWrapper}
      </List>
    )}
  </AutoSizer>
);

render(<Example />, document.getElementById("root"));