[英]Tracking visibility of items rendered by react-window
I was looking for a way to know which list item is visible on the screen when using react-window . 我正在寻找一种方法来知道使用react-window时屏幕上可见的列表项。
The isVisible prop is returning the visibility wrongly . isVisible道具错误地返回了可见性。
https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq 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"));
This could possibly be because of caching of items, but i was wondering if there is another way to track visibility of an item 这可能是由于项目的缓存,但是我想知道是否还有另一种方法来跟踪项目的可见性
I figured it out on my own . 我自己解决了。 Please find the code sandboxes at
请在以下位置找到代码沙箱
DynamicSizeList - https://codesandbox.io/s/piecykreact-window-dynamic-size-list-vertical-pooy2 DynamicSizeList - https: //codesandbox.io/s/piecykreact-window-dynamic-size-list-vertical-pooy2
By trapping the onWheel event and comparing the "tops" with clientHeight and ListHeight 通过捕获onWheel事件并将“ tops”与clientHeight和ListHeight进行比较
FixedSizeList - https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq FixedSizeList - https: //codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq
Also based on onWheel event. 也基于onWheel事件。
It doesnt work with react-on-screen . 它不适用于屏幕反应 。
If someOne knows a better way of doing then please answer. 如果有人知道更好的方法,请回答。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.