0

复制步骤：

https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

在“DetailsList Locked Header”中，向下滚动到超过第一页的非零位置，然后在“按名称过滤”中输入“sed”。这会更新 detailsList 并且滚动条不会转到初始位置。

错误/询问：

当我们向下滚动到假设 50 的位置时，现在如果详细信息列表有更新，假设为 350。滚动条不会返回到起始位置，它会重新渲染到靠近顶部的随机位置（在我的案子）。

方法/临时黑客：

通过代码，我注意到可滚动窗格的初始滚动位置仅在实现中的“initialScrollPosition”道具更改时才被刷新。每当 detailList 通过将其设置为 0 或 1 进行更新时，我尝试更改组件中的 'initialScrollPosition' 道具。对此进行调试时，initialScrollPosition 的道具在 ScrollablePane 组件内没有改变。这不起作用，可滚动窗格仍未设置为开始。

有没有人找到解决方法或解决方案？

4

1 回答 1

0

我有同样的问题，我也在使用不定式滚动（react-infinite-scroller）来加载数据。我最后做的是用css替换scrollablepane。

（函数 handleGetNext 只是加载新数据，而变量 dataToRender 我保持在状态以在旧状态和新状态之间进行连接）

<div>
  {handleSelect()}
 <div style={{ overflowY: "scroll", height: 500 }} id="containers">
                <InfiniteScroll
                  pageStart={0}
                  loadMore={() => {
                    handleGetNext(overviewData.page);
                    handleSelect();
                  }}
                  hasMore={!loadingNext && !!overviewData && overviewData.page < overviewData.totalPages}
                  initialLoad={false}
                  useWindow={false}
                >
                  <ShimmeredDetailsList items={dataToRender} enableShimmer={overviewLoading} .........../>
                </InfiniteScroll> 
  </div>
 </div>

稍后您需要设置滚动位置的棘手之处取决于您要滚动的位置。

const handleSelect = () => {
  const elemToScrollTo = document.getElementById("containers");
  if (!!elemToScrollTo) {
    elemToScrollTo.scrollTop = 2100;//example
  }
};
于 2021-06-03T09:38:14.297 回答