Office UI Fabric: положение ScrollablePane не сбрасывается в исходное положение при обновлении списка сведений

Question

Шаги репликации:

https://developer.microsoft.com/en-us/fluentui

Прокрутите список "Подробный список заблокированных заголовков" до ненулевой позиции, превышающей первую страницу, и введите "sed" в поле "фильтр по имени". Это обновляет список деталей, и полоса прокрутки не переходит в исходное положение.

Ошибка / Спросите:

Когда мы прокручиваем вниз, скажем, до позиции 50, и теперь, если есть обновление в списке деталей, скажем, предположим, что 350. Полоса прокрутки не возвращается в начальную позицию, и она перерисовывается в случайную позицию близко к верхнему (в моем кейс).

Подход / временный взлом:

Просматривая код, я заметил, что начальная позиция прокрутки прокручиваемой панели обновляется только тогда, когда в реализации меняются реквизиты initialScrollPosition. Я попытался изменить свойство initialScrollPosition в моем компоненте всякий раз, когда detailList обновляется, задав для него значение 0 или 1. При отладке свойства initialScrollPosition не менялись внутри компонента ScrollablePane. Это не сработало, и прокручиваемая панель все еще не установлена ​​в начало.

Кто-нибудь нашел обходной путь или решение для этого?

Answer 1

У меня была такая же проблема, я также использую бесконечную прокрутку (реагирующий бесконечный скроллер) для загрузки данных. что я наконец сделал, так это заменил scrollablepane на css.

(Функция 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
  }
};