Как вернуться к той же части набора данных при виртуальной прокрутке?

Question

Существует замечательная схема оптимизации рендеринга больших наборов данных, называемая виртуальной прокруткой. В этом конкретном случае я использую https://material.angular.io/cdk/scrolling/overview API-интерфейса Angular Material CDK, чтобы получить такое поведение. Однако у меня есть требование, когда пользователь переходит на другую страницу и возвращается, пользователь должен находиться в том конкретном месте, которое он оставил (например, перейти к деталям элемента 3498, а когда он возвращается, он должен начинаться с пункта 3498, а не пункта 1). Каков наилучший способ достичь этого?

Answer 1

Вы можете ввести CdkVirtualScrollViewport посмотреть ребенка:

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

тогда вы можете играть с такими методами, как this.getOffsetToRenderedContentStart() а также this.setRenderedContentOffset() сохранить и восстановить исходное местоположение прокрутки.

Вы можете, например, хранить эту информацию в сервисе или локальном хранилище.

Answer 2

Реализовал то, что предложил Франческо Борци, и все работает отлично. Вот реализация стекаблица. Большая часть действия происходит в файле примера cdk-virtual-scroll-Overview-example.

Answer 3

Стоит отметить, что есть еще пара полезных методов: measureScrollOffset и scrollToOffset. Метод measureScrollOffset:

Получает текущее смещение прокрутки от начала области просмотра (в пикселях).

Таким образом, он принимает во внимание то, что видит пользователь, а не отображаемый контент - например, getOffsetToRenderedContentStart - для этого метода я не мог получить относительно небольшие значения прокрутки.