仅在滚动时显示 Div 并且元素在动态列表中可用

问题描述

我有一个元素列表，长度是动态的，最大可以是 1000。

我现在正在做的是遍历列表并为每个元素创建一个 div，这反过来增加我的 DOM 大小。所以，我想加载 5 个 div（如果列表大小 >=5）并在用户滚动时加载其余部分。假设 5 个 div 覆盖整个页面。有人可以提示我或告诉我如何在没有 jquery 的情况下做到这一点（因为 jquery 包大小很大）

我尝试做的事情的示例

 data = list/json of number e.g data =[1,2,3,4,5,.....]
    
    const finalResponse = () =>
    data.map(idx: number): React.ReactElement => {
                        return (<div>sample idx</div>);})
    
    main()
    {return <>{finalResponse()}</>}

在我的案例中最终看起来像这样：

<>
<div>sample 1</div>
<div>sample 2</div>
<div>sample 3</div>
<div>sample 4</div>
<div>sample 5</div>
<div>sample 6</div>
<div>sample 7</div>
<div>sample 8</div> and so on
</>

我想要的是

  <>
    <div>sample 1</div>
    <div>sample 2</div>
    <div>sample 3</div>
    <div>sample 4</div>
    <div>sample 5</div>
    </>
and add the rest when scrolled

解决方法

通过在滚动时添加事件侦听器解决了这个问题。

滚动时，该函数将状态设置为真

我做类似的事情

const finalResponse = (start,end) =>
   data.slice(start,end+1)map(idx: number): React.ReactElement => {
                       return (<div>sample idx</div>);})

   main()
   {return <>{finalResponse(0,5)}
{finalResponse(6,data.length)}
</>}

dom javascript scroll scroll scroll