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等待几秒钟，然后再次使用window.scrollBy（0，-100）来使用scrollIntoView（）。
5. 给图像容器一个固定的高度（即：500px），以便延迟加载的图像会填满容器，但是如果在其他页面上使用该组件会得到较大尺寸的图像（即：1200px），该怎么办UI。
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 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
    }
  }
}

Answer 2

党。

您应该确保兼容性。

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

顺便说一句，我真的不知道您的问题是否与延迟加载实现或scrollIntoView更相关。如果是关于延迟加载的问题，我强烈建议您使用JQuery Lazy loading，因为它的简单配置可以防止您头疼。

延迟加载和ScrollIntoView（）Angular2（版本7）

2 个答案: