Lazy Loading and ScrollIntoView() Angular2(version 7)

Question

我试图在第一次加载页面时使用懒惰加载，如果内容在视图中，则仅加载该页面。例如： - 页面上有10个组件，我想在第一次加载时显示/滚动到第7个组件编号7(用于性能(。

我该如何正确执行此操作？挑战是因为这些组件是懒惰的加载，并且具有巨大的图像，这些图像使ScrollIntoview((弄乱了，并且向顶部滚动了太多。

• 我已经尝试了这些方法，但没有运气：(
• 提到组件7：
  1. 通过scrollintoview((滚动到该组件。使用window.scrollby(0，-100(进行导航栏。
  2. 获取组件offsetTop并使用窗口.scrollto(0，targetcomponent.offsettop -100(;
  3. 两种方法都采用上面的方法，但以2s -5s的定居方式也不起作用。
  4. 使用scrollintoview((滚动到组件，与settimeout等待几秒钟，然后再次使用scrollintoview((window.scrollby(0，-100(也不起作用。
  5. 给图像容器一个固定高度(即：500px(，因此懒惰的加载图像将填充容器，但是如果在其他页面上使用该组件会获得更大尺寸的图像(即：1200px(，该怎么办向上UI。
  6. window.scrolly，window.pageyOffset，getBoundingClientRect((。顶部和获得我需要的高度的这些值与与console.log相比的代码与浏览器值的cons.log相比有所不同，因此我的计算不正确。
  7. scrollintoview({block：'start'}(和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); 
  }
}

我希望该页面在导航栏下方(高度约为100px(的第一次访问时显示该组件。我已经搜索了解决方案并尝试了不同的事情，但仍然陷入困境。

我错过了一些东西来获取此功能Scrollintoview来使用懒惰的加载内容吗？谢谢！

Answer 1

dang。

您应该确保兼容性。

如果您在此处阅读，请注意，{block：" start"}之类的选项并不真正支持任何浏览器。

bytheway，我真的不知道您的问题是否与懒惰加载实现或滚动曲目有关。如果是关于懒惰的加载，我强烈建议您使用jQuery懒惰的加载，这将阻止您轻松配置。

Answer 2

• 现在的最佳解决方案

export class BBQComponent implements AfterContentChecked {
  @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
    }
  }
}