Ленивая загрузка и ScrollIntoView () Angular2 (версия 7)

Question

Я пытаюсь показать компонент при первой загрузке страницы с отложенной загрузкой, который загружает только содержимое, если оно находится в представлении. Например: - На странице 10 компонентов, и я хочу показать / прокрутить до номера компонента 7 при первой загрузке с отложенной загрузкой (для производительности).

Как мне сделать это правильно? Проблема здесь в том, что эти компоненты загружаются лениво и имеют огромные изображения, которые испортили scrollIntoView () и слишком много прокручивали до верха переданного компонента.

• Я попробовал эти подходы, но не повезло: (
• Поставить ссылку на компонент 7:
  1. Прокрутите до этого компонента с помощью scrollIntoView (). Используйте window.scrollBy (0, -100) для панели навигации.
  2. Получить компонент offsetTop и использовать window.scrollTo (0, targetComponent.offsetTop - 100);
  3. Оба подхода выше, но с setTimeout 2s - 5s тоже не сработало.
  4. Используйте scrollIntoView () для прокрутки к компоненту, подождите пару секунд с setTimeout и снова используйте scrollIntoView () с window.scrollBy (0, -100) также не работает.
  5. Дайте контейнеру изображения фиксированную высоту (то есть: 500 пикселей), чтобы ленивая загрузка изображений заполнила контейнер, но что, если компонент, используемый на других страницах, получит изображение большего размера (то есть: 1200 пикселей) будет испорчено до пользовательского интерфейса.
  6. window.scrollY, window.pageYOffset, getBoundingClientRect (). Top и эти значения, чтобы получить нужную мне высоту, отличаются от кода, сравниваемого с console.log кода, по сравнению со значениями браузера, поэтому мои вычисления неверны.
  7. scrollIntoView ({block: 'start'}) и window.scrollBy (0, -100) также не работали. Он также прокручивал верхнюю часть и проходил панель навигации, хотя я использовал window.scrollBy (0, -100). Также попробовал setTimeout с этим тоже.

Что-то вроде этого, которое я пробовал, но компонент все еще слишком сильно прокручивается к началу.

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div #target>Target Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;

  ngAfterViewInit() {
    setTimeout(_ => {
     this.targetElement.nativeElement.scrollIntoView({block: "start"});
     window.scrollBy(0, -100);
    }, 2000); 
  }
}

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

Есть что-то, что я упустил, чтобы эта функция scrollIntoView работала с отложенной загрузкой контента? Спасибо !!

Answer 1

Dang.

Вы должны убедиться в совместимости.

Если вы читаете здесь Doc , обратите внимание, что такие параметры, как {block: "start"}, на самом деле не поддерживаются длялюбой браузер.

Кстати, я не знаю, действительно ли ваша проблема связана с реализацией отложенной загрузки или scrollIntoView.Если речь идет о отложенной загрузке, я настоятельно рекомендую вам использовать JQuery Lazy loading , который предотвратит головную боль благодаря его простой настройке.

Answer 2

• Лучшее решение на данный момент

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;
  scrolled = false; // To avoid multiple scrolls because ngAfterContentChecked

  ngAfterContentChecked() { // Changed from ngAfterViewInit()
    if(!scrolled) {
      const target = this.targetElement.nativeElement;
      target.scrollIntoView({block: "start"}); // Scroll to the component

      // After scrolled, wait for the browser to figure out where the 
      // component is after lazy loading is done. Scroll again.
      setTimeout(_ => {
       target.scrollIntoView({block: "start"});
       window.scrollBy(0, -100); // Nav's height
       this.scrolled = true;
      }, 1000); // Adjust wait time as needed
    }
  }
}