跟踪由 react-window 渲染的项目的可见性答案

【问题标题】：Tracking visibility of items rendered by react-window跟踪由 react-window 渲染的项目的可见性
【发布时间】：2023-04-03 09:26:01
【问题描述】：

我正在寻找一种方法来了解使用 react-window 时屏幕上可以看到哪个列表项。

isVisible 道具错误地返回了可见性。

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq

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"));

这可能是因为缓存项目，但我想知道是否有另一种方法来跟踪项目的可见性

【问题讨论】：

我可以通过在 outerElementType 上收听 onwheel 并进行一些数学运算来获得可见项目。但这都是针对 fixedsize 的，不知道如何为 dynamicsizelist 做。

标签： javascript reactjs react-window

【解决方案1】：

我自己想出来的。请在

找到代码沙箱

DynamicSizeList - https://codesandbox.io/s/piecykreact-window-dynamic-size-list-vertical-pooy2

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

FixedSizeList -https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq

同样基于 onWheel 事件。

它不适用于 react-on-screen。

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

【讨论】：