虚拟列表实现思路 —— 代码链接
<div class="滚动容器"> <div class="撑起列表正常高度"></div> <div class="列表容器"> <div class="列表项"></div> </div> </div>
1.【列表项】的高度确定。
2. 利用【滚动容器】的高度计算展示多少个【列表项】(向上取整)
3. 利用【滚动容器】的scrollTop即将展示的【列表项】的索引,结果+第2项结果 = 展示【列表项】下限
4. 【列表容器】使用绝对定位+transform:translate(开始索引*列表项高度,0 ) 保持在滚动容器展示的位置
5. 【滚动容器】onscroll 事件中执行(3、4)即可