Question

所以我有一个侧边栏，我试图实现反应虚拟化列表。它的工作方式是：

侧边栏有一个带标题的手风琴，并将虚拟化列表作为反应内容。边栏具有固定宽度
- 点击标题会折叠其他列表并打开相应的列表，该列表将占用所有可用的高度
- 可以动态地将新项目添加到这些列表中，列表高度也会不断变化。

面临的问题：

试图滚动滚动条时闪烁，只是一直跳到列表的底部并粘在那里，无法向后滚动。
底部有很多空白区域。
滚动期间保持闪烁的列表项目
有时会出现2个滚动标记

下面是我的代码：

<AutoSizer>
        {({ width, height }) => (
          <List
            className="lazyList"
            width={300}
            height={height}
            overscanRowCount={5}
            rowCount={collection.length}
            rowHeight={200}
            rowRenderer={renderListItems}
          />
        )}
      </AutoSizer>

以下是呈现的HTML

<div class="listWrapper listActive" style="position: relative; overflow-y: hidden; max-height: 233px; height: 233px;">
   //This I assume is the autosizer... notice how its height is 0
    <div style="overflow: visible; height: 0px;">
      <div aria-label="grid" class="ReactVirtualized__Grid ReactVirtualized__List lazyList" role="grid" tabindex="0" style="box-sizing: border-box; direction: ltr; height: 233px; position: relative; width: 240px; will-change: transform; overflow-x: hidden; overflow-y: auto;">
         <div class="ReactVirtualized__Grid__innerScrollContainer" style="width: auto; height: 450px; max-width: 240px; max-height: 450px; overflow: hidden; position: relative;">
            <div data-id="c108" id="4515846326789249667" class="list-item summary-list" data-index="aaa 1">
                Item 1
            </div>
            <div data-id="c109" id="45158463267892496637" class="list-item summary-list" data-index="aaa3 1">
                Item 2
            </div>
            <div data-id="c101" id="45158463267892439667" class="list-item summary-list" data-index="aaa4 1">
                Item 3
            </div>
            <div data-id="c102" id="45158463267892439667" class="list-item summary-list" data-index="aaa5 1">
                Item 4
            </div>

         </div>
      </div>
   </div>
   <div class="resize-triggers">
      <div class="expand-trigger">
         <div style="width: 241px; height: 233px;"></div>
      </div>
      <div class="contract-trigger"></div>
   </div>
</div>

反应虚拟化列表滚动问题

0 个答案: