Question

复制步骤：

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

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

错误/询问：

当我们向下滚动到位置50时，现在如果要更新详细信息列表并假设是350。滚动条不会返回到起始位置，而是会移到靠近顶部的随机位置（就我而言）。

方法/临时黑客：

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

有人找到了解决方法或解决方案吗？

Answer 1

我遇到了同样的问题我还使用不定式滚动（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
  }
};

Office UI Fabric：更新详细信息列表时，不会将ScrollablePane的位置重置为初始位置

1 个答案: