延迟加载和 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. 给图像容器一个固定的高度（即：500px），这样延迟加载的图像会填满容器，但是如果该组件在其他页面上使用得到更大尺寸的图像（即：1200px）会乱用户界面。
  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

• 目前最好的解决方案

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
    }
  }
}

Answer 2

当。

你应该确保兼容性。

如果您在此处阅读Doc 请注意，任何浏览器都不真正支持像 {block : "start"} 这样的选项。

顺便说一句，我真的不知道您的问题是否与延迟加载实现或scrollIntoView 更相关。如果是关于延迟加载，我强烈建议您使用JQuery Lazy loading，这将避免您对他的简单配置感到头疼。