Прокрутка привязана к нижней части страницы после появления нового загруженного контента

Question

В проекте Angular 7 у меня есть страница со списком продуктов. На нем есть кнопка «Загрузить больше товаров» (ленивая загрузка). по его щелчку запрос отправляется на сервер, а когда приходит ответ, он добавляется в текущий список продуктов. Проблема в том, что я ожидал, что страница «останется на месте» после того, как ответ придет, чтобы я мог увидеть последний просмотренный продукт и продолжить прокрутку. К моему удивлению, он работает по-другому, он остается привязанным к нижней части, поэтому я вижу нижний колонтитул и кнопку «Загрузить еще ...» после получения ответа.

Я пытался прокрутить его до последней позиции перед загрузкой нового контентано это не работаетЯ использовал метод elemnet.scroll (x, y), потому что window.scrollTo (x, y) не работает в нашем приложении :) .a Младшая работа AHh: P.

// Ниже - функция witchзагружает новый контент в ProductListComponent

// this.scrollTop - это свойство, рассчитанное в другой части компонента, я не хочу, чтобы оно вас не отвлекало.

getProductListById(...someArgs).pipe(
        tap(payload => {
          let newItems = [];
          newItems = this.productList;
          newItems.push(...this.filterList(payload.items));
          this.productList = [...newItems];
        }),
        finalize(() => {
          this.screenService.scrollTo.next(this.scrollTop);
        })
      );

// ScreenService // он был создан из-за неработающего метода window.scrollTo (). Это работает во всех других случаях, но здесь ...

 public scrollTo: Subject<number> = new Subject();

// CoreComponent

ngOnInit(){    
this.screenService.scrollTo.pipe(takeUntil(this.unsubscribe)).subscribe(scrollTop => {
      this.scrollTo(scrollTop);
    });
}

  scrollTo(scrollTop: number) {
    if (!isNaN(scrollTop)) {
      this.scrollContainer.nativeElement.scroll(0, scrollTop);
    }
  }

Я не рассчитываю на исправление прокрутки, еслиесть другой способ сохранить страницу на своем месте и отключить это поведение привязки, пожалуйста, сообщите мне. Надеюсь на несколько советов.

Answer 1

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

Здесь браузер поддерживает некоторую привязку к элементам, поэтому при добавлении всех элементов в списке он всегда остается внизу.

Попробуйте добавить непосредственно в исходный список

Таким образом

getProductListById(...someArgs).pipe(
        tap(payload => {
this.productList.push(...this.filterList(payload.items))})
      );

Тогда вам может не понадобиться услуга прокрутки.